/* ++++++++++ RESET ++++++++++ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }



/* ++++++++++ Vars ++++++++++ */
:root {
  --kanalconcept: #FFB720;
  --rohrstar: #FFE000;
  --black: #333333;
}


/* ++++++++++ FONTS ++++++++++ */

/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/poppins-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ++++++++++ CONTENT ++++++++++ */

html {
    font-size: 62.5% !important;
    color: #ffffff;
}

body {
    background-color: var(--black);
    background: url("/images/bg.webp") var(--black) no-repeat;
    background-size: cover;
    font-family: 'Poppins';
}

.wrapper {
    height: auto;
    min-height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    overflow: hidden;
}

.content {
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 1300px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding: 10rem 5rem 12rem 5rem;
    box-sizing: border-box;
}

.boxen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    overflow: hidden;
}

.box {
    background-color: #ffffff;
    color: var(--black);
    width: auto;
    border-radius: 3rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 5rem 5rem;
    box-sizing: border-box;
}

.logoWrapper {
    height: 12rem;
    display: flex;
    justify-content: start;
}

.logoWrapper img {
    height: 100%;
    max-width: 100%;
}

.line {
    height: 1px;
    border-bottom: 1px solid #CDCDCD;
}

body {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: clamp(1.5rem, 2vw, 1.8rem);
}

strong {
    font-weight: 500;
}

p {
    line-height: 130%;
}

h1 {
    background: linear-gradient(90deg, var(--rohrstar), var(--kanalconcept));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-align: center;
    padding-bottom: 0.15em;
}

.hero-title {
  font-weight: 800;
  line-height: 1.05;
  /* fluide Größe: min 2rem, skaliert mit Viewport, max 5rem */
  font-size: clamp(4rem, 6vw, 7rem);
  text-wrap: balance;   /* verteilt Umbrüche gleichmäßig statt einzelner Waisen-Wörter */
}

.hero-subline {
  display: block;       /* erzwingt immer eine eigene Zeile */
  font-size: 0.7em;     /* relativ zur H1 → skaliert automatisch mit */
  line-height: 1.1;
  margin-top: 0.15em;
}

h2, h3 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

.services {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    padding-left: 0;
    -webkit-hyphens: auto; 
    hyphens: auto;
}

.services i {
    color: #555555;
    margin-right: 1.0rem;
}

.buttons {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.button {
    color: var(--black);
    text-decoration: none;
    padding: 1.5rem 3rem;
    border-radius: 1rem;
    font-size: clamp(1.6rem, 2.2vw, 2rem);
    font-weight: 400;
    display: flex;
    gap: 1rem;
}

.button i {
    width: 3rem;
}

.rohrstar .button {
    background-color: var(--rohrstar);
}

.kanalconcept .button {
    background-color: var(--kanalconcept);
}


.legalInfo {
    padding: 1.5rem 0;
}

.legalInfo ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;          /* Umbruch auf schmalen Screens */
    justify-content: center;  /* zentriert die <li> in der ul */
    gap: 2rem 4rem;
    margin: 0;
    padding: 0;               /* Default-Einzug der Liste entfernen */
    list-style: none;
}

.legalInfo a {
    color: #ffffff;
    font-size: clamp(1.4rem, 2vw, 1.7rem);
    text-decoration: none;
}

.legalInfo a:hover {
    text-decoration: underline;
}






@media only screen and (max-width: 1050px) {
  .boxen {
    gap: 3rem;
}
.box {
    padding: 4rem 4rem;
}
}

@media only screen and (max-width: 930px) {
.boxen {
    grid-template-columns: 1fr;
    margin-right: auto;
    margin-left: auto;
    max-width: 500px;
    width: 100%;
}
.boxcontent {
    padding: 3rem 3rem;
}
.logoWrapper {
    height: auto;
}
.logoWrapper img {
    width: 100%;
    max-height: 90px;
}
}

@media only screen and (max-width: 650px) {
.content {
    padding: 5rem 3rem 7rem 3rem
}


}


@media only screen and (max-width: 570px) {
.box {
    padding: 3rem 2rem;
}
.content {
    padding-right: 1rem;
    padding-left: 1rem;
}
.button i {
    display: none;
}
}


@media only screen and (max-width: 400px) {
.button {
    word-break: break-all;
}
}