@charset "UTF-8";
/*//////////////////////////////////////////////=============================
     PASTATAINMENT / PAW PATROL PASTA  //////////  © 2026 BITENOTBARK
     Eine CSS-Datei fuer Landingpage + Produktseiten (DE/EN).
     Variante wird ueber einen Wrapper im CMS-Content gesteuert:
       <div class="pasta-landing">  Landingpage (Sunburst, blau)
       <div class="pasta-blue">     Produktseite Bolognese
       <div class="pasta-red">      Produktseite Pomodoro
     Body-Hintergrund + Logo-Kachel schalten per :has() um.
     Annahme: html { font-size: 62.5% } wie in den anderen Aktions-CSS (1rem = 10px)
=============================//////////////////////////////////////////////*/

/*//////////////////////////////////////////////=============================
     FONTS  (Platzhalter: Gibson aus paw-patrol wiederverwenden -> bei Bedarf tauschen)
=============================//////////////////////////////////////////////*/
@font-face {
 font-family: 'PastaHead';
 src: url('../fonts/paw-patrol/Gibson_Heavy_Italic.otf') format('opentype');
 font-weight: normal;
 font-style: normal;
 font-display: swap;
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     BASICS
=============================//////////////////////////////////////////////*/
:root {
 --pasta-white: #fcfaf3;
 --pasta-yellow: #ffd200;
 --pasta-red: #e31e24;
 --pasta-navy: #0b4fa8;
 --pasta-navy-dark: #0a3f8c;
 --pasta-accent: var(--pasta-navy);          /* Farbe der Logo-Kachel */
 --pasta-font-head: 'PastaHead', 'Arial Black', Arial, sans-serif;
 --pasta-font-text: 'Myriad Pro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 --pasta-font-cond: 'Rajdhani', 'Arial Narrow', Arial, sans-serif;
 --pasta-gutter: clamp(1.6rem, 6vw, 12rem);
 --pasta-max: 1320px;                        /* feste Maximalbreite fuer Kopfzeile + Content (wie amadeus.css / Bibi & Tina) */
}
body.pasta {
 position: relative;
 color: var(--pasta-white);
 font-family: var(--pasta-font-text);
 background: linear-gradient(180deg, #0e9fdc 0%, #0a62b8 32%, #0a4a9c 62%, #0a4a9c 100%);
 background-repeat: no-repeat;
 background-color: #0a4a9c;
 overflow-x: hidden;
}
/* default.css setzt p/ul auf font-weight:100 -> mit System-Schriften (iOS/Android) wird das wirklich "thin". Hier auf normal zurueck. */
.pasta p,
.pasta ul,
.pasta ol,
.pasta li,
.pasta table,
.pasta td,
.pasta th { font-weight: 400; }
.pasta b,
.pasta strong { font-weight: 700; }
/* Variante Pomodoro (rot) */
body.pasta:has(.pasta-red) {
 --pasta-accent: var(--pasta-red);
 background: linear-gradient(180deg, #f4bcd2 0%, #ea4b5c 24%, #e31e24 52%, #e31e24 100%);
 background-repeat: no-repeat;
 background-color: #e31e24;
}
/* Variante Landingpage: Blitz-Hintergrund (transparentes PNG) ueber dem Blauverlauf */
body.pasta:has(.pasta-landing) {
 background: linear-gradient(180deg, #17a3e0 0%, #1590d3 40%, #0a5cb0 62%, #0a4a9c 78%, #0a4a9c 100%);
 background-repeat: no-repeat;
 background-color: #0a4a9c;
}
body.pasta:has(.pasta-landing)::before {
 content: "";
 position: absolute;
 inset: 0 0 auto 0;
 aspect-ratio: 1708 / 1314;                  /* Seitenverhaeltnis von blitzhintergrund.png -> Hoehe skaliert mit der Breite */
 z-index: -1;                                /* hinter allem Content, ohne Header/Main zu Stacking-Contexts zu machen (sonst liegt main ueber der fixierten Navigation) */
 pointer-events: none;
 background: url('/img/pasta/blitzhintergrund.png') center top / 100% auto no-repeat;
}
body.pasta main *,
body.pasta .pastaTop,
body.pasta .pastaTop * { box-sizing: border-box; }
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     KOPFZEILE
=============================//////////////////////////////////////////////*/
.pastaTop {
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: start;
 column-gap: 1rem;
 padding: 0 clamp(1rem, 3vw, 6rem);
 max-width: var(--pasta-max);
 margin: 0 auto;
}
.pastaTop__badge {
 justify-self: start;
 width: clamp(8.5rem, 19vw, 21rem);
 margin-top: clamp(6.5rem, 9vw, 11rem);
}
.pastaTop__logo {
 width: clamp(11rem, 15vw, 22rem);
 /*background: var(--pasta-accent);*/
 /*padding: clamp(1rem, 1.8vw, 2.4rem) clamp(.8rem, 1.4vw, 2rem) clamp(.8rem, 1.4vw, 2rem);*/
}
.pastaTop__logo a { display: block; }
.pastaTop__logo img { display: block; width: 100%; height: auto; margin-top: 0px !important; }
.pastaTop__logo .logo-red { display: none; }
body.pasta:has(.pasta-red) .pastaTop__logo .logo-blue { display: none; }
body.pasta:has(.pasta-red) .pastaTop__logo .logo-red { display: block; }
.pastaTop__license {
 justify-self: end;
 width: clamp(9rem, 22vw, 24rem);
 margin-top: clamp(4rem, 6vw, 8rem);
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     HAUPTBEREICH / TYPO
=============================//////////////////////////////////////////////*/
/* Bootstrap-Geruest des CMS (section-block > container.page > row > col) auf volle Breite ziehen */
.pasta main .section-block { padding-top: 0 !important; padding-bottom: 0 !important; }
.pasta main .container { max-width: none; padding-left: 0; padding-right: 0; }   /* verschachtelte Container nicht nochmal begrenzen */
.pasta main .container.page { max-width: var(--pasta-max); margin-left: auto; margin-right: auto; }
.pasta main .container.pt-5 { padding-top: 0 !important; }   /* HEAD-Feld bleibt leer */
.pasta main .row { margin-left: 0; margin-right: 0; }
.pasta main [class*="col-"] { padding-left: 0; padding-right: 0; }
.pasta h1,
.pasta h2,
.pasta h3 {
 font-family: var(--pasta-font-head);
 font-weight: normal;
 font-style: normal;                          /* Schnitt ist bereits kursiv */
 font-synthesis: none;
 text-transform: uppercase;
 color: var(--pasta-white);
}
.pasta-content a { color: var(--pasta-white); }
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     PRODUKTSEITEN (.pasta-blue / .pasta-red)
=============================//////////////////////////////////////////////*/
.pasta-blue, .pasta-red { padding-top: clamp(2rem, 4vw, 6rem); }
.pasta-pack {
 display: block;
 width: min(94%, 112rem);
 height: auto;
 margin: 0 auto clamp(2rem, 5vw, 8rem);
 filter: drop-shadow(0 2.4rem 2.8rem rgba(0,0,0,.35));
}
.pasta-blue h1, .pasta-red h1 {
 text-align: center;
 font-size: clamp(3.6rem, 8vw, 9.4rem);
 line-height: 1.05;
 margin: 0 0 clamp(3rem, 6vw, 9rem);
}
.pasta-info {
 max-width: 118rem;
 margin: 0 auto;
 padding: 0 var(--pasta-gutter);
 text-align: left;
}
.pasta-info h2 {
 font-size: clamp(1.9rem, 2.6vw, 3rem);
 line-height: 1.15;
 margin: 0 0 clamp(1.6rem, 2.4vw, 3rem);
}
.pasta-info h3 {
 font-size: clamp(1.9rem, 2.4vw, 2.8rem);
 line-height: 1.15;
 margin: clamp(3rem, 4vw, 5rem) 0 1.2rem;
}
.pasta-info p {
 font-family: var(--pasta-font-text);
 font-size: clamp(1.3rem, 1.15vw, 1.6rem);
 line-height: 1.3;
 margin: 0 0 1.6rem;
 color: var(--pasta-white);
}
.pasta-info ol {
 font-family: var(--pasta-font-text);
 font-size: clamp(1.3rem, 1.15vw, 1.6rem);
 line-height: 1.3;
 margin: -.8rem 0 1.6rem;
 padding-left: 1.8rem;
}
.pasta-info ol li { padding-left: .2rem; }
/* Naehrwerttabelle */
.pasta-nutrition {
 width: auto !important;
 max-width: 42rem;
 border-collapse: collapse;
 font-family: var(--pasta-font-text);
 font-size: clamp(1.3rem, 1.15vw, 1.6rem);
 line-height: 1.25;
 color: var(--pasta-white) !important;
 margin-bottom: 2rem;
}
.pasta-nutrition td,
.pasta-nutrition th {
 color: var(--pasta-white) !important;
 background: none !important;
 border: 0 !important;
 padding: .1rem 3.2rem .1rem .4rem;
 font-weight: normal;
 text-align: left;
}
.pasta-nutrition tr:nth-child(even) { border-bottom: 1px solid rgba(255,255,255,.85); }
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     LANDINGPAGE (.pasta-landing)
=============================//////////////////////////////////////////////*/
.pasta-landing { padding-top: clamp(3rem, 6vw, 9rem); }   /* Abstand Kopfzeile -> Headline (Kopfzeile liegt im normalen Fluss davor) */
.pasta-landing h1 {
 text-align: center;
 font-size: clamp(3rem, 6.6vw, 8.2rem);
 line-height: 1.08;
 margin: 0 auto;
 padding: 0 1.6rem;
 -webkit-text-stroke: clamp(.6rem, 1.1vw, 1.3rem) var(--pasta-navy);
 paint-order: stroke fill;
 text-shadow: 0 .5rem 0 var(--pasta-navy-dark);
}
.pasta-packshots {
 display: flex;
 align-items: flex-start;
 justify-content: center;
 width: min(94%, 118rem);
 margin: clamp(1rem, 3vw, 4rem) auto 0;
}
.pasta-packshots img {
 display: block;
 width: 54%;
 height: auto;
 filter: drop-shadow(0 2rem 2.4rem rgba(0,0,0,.3));
}
.pasta-packshots img + img {
 margin-left: -8%;
 margin-top: clamp(6rem, 12vw, 16rem);
 position: relative;
}
/* Gelbes Pfeil-Banner (Silberkante folgt mit Grafik) */
.pasta-banner {
 position: relative;
 width: min(96%, 58rem);
 margin: clamp(-4rem, -3vw, -1rem) 0 0;
 padding: clamp(1.6rem, 2.4vw, 3rem) clamp(5rem, 8vw, 10rem) clamp(1.6rem, 2.4vw, 3rem) clamp(1.6rem, 3vw, 4rem);
 background: linear-gradient(180deg, #ffd800 0%, #f0bd00 100%);
 clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%);
 font-family: var(--pasta-font-head);
 text-transform: uppercase;
 line-height: 1.1;
}
.pasta-banner strong {
 display: block;
 color: var(--pasta-red);
 font-weight: normal;
 font-size: clamp(2.4rem, 4.4vw, 5.2rem);
}
.pasta-banner span {
 display: block;
 color: var(--pasta-navy);
 font-size: clamp(1.5rem, 2.6vw, 3.1rem);
}
.pasta-banner span img {
 display: inline-block;
 width: 1.8em;
 height: auto;
 vertical-align: middle;
 margin-right: .6rem;
}
.pasta-claim {
 margin: clamp(5rem, 9vw, 12rem) auto 0;
 padding: 0 1.6rem;
 text-align: center;
 font-family: var(--pasta-font-head);
 font-size: clamp(2.6rem, 4.6vw, 5.8rem);
 line-height: 1.22;
 color: var(--pasta-white);
}
/* Sprechblase Social Media */
.pasta-social {
 position: relative;
 width: min(86%, 38rem);
 margin: clamp(4rem, 8vw, 10rem) clamp(2rem, 8vw, 10rem) 6rem auto;   /* unten Platz fuer die Sprechblasen-Spitze */
 padding: 2.4rem 2rem 3rem;
 text-align: center;
 background: #0c9ade;
 border: .5rem solid var(--pasta-white);
 border-radius: 4.4rem;
}
.pasta-social::after {
 content: "";
 position: absolute;
 left: 14%;
 bottom: -4.2rem;
 width: 5rem;
 height: 4.6rem;
 background: var(--pasta-white);
 clip-path: polygon(0 0, 100% 0, 30% 100%);
}
.pasta-social strong {
 display: block;
 font-family: var(--pasta-font-head);
 text-transform: uppercase;
 font-weight: normal;
 font-size: clamp(2.8rem, 3.4vw, 4rem);
 line-height: 1;
}
.pasta-social span {
 display: block;
 font-family: var(--pasta-font-head);
 text-transform: uppercase;
 font-size: clamp(1.4rem, 1.6vw, 2rem);
 margin: .4rem 0 1.2rem;
}
.pasta-social .icons { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.2rem; }
.pasta-social .icons img { width: 5.2rem; height: 5.2rem; padding: .9rem; background: var(--pasta-navy); border-radius: 50%; }
.pasta-social em {
 display: block;
 font-style: normal;
 font-family: var(--pasta-font-head);
 text-transform: uppercase;
 font-size: clamp(1.8rem, 2.2vw, 2.6rem);
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     FOOTER + LIZENZHINWEIS
=============================//////////////////////////////////////////////*/
.pasta .pastaFooter {
 padding: 0 0 clamp(3rem, 5vw, 6rem);
 font-family: var(--pasta-font-cond);
 font-size: clamp(1.4rem, 1.2vw, 1.7rem);
 line-height: 1.5;
 color: var(--pasta-white);
 text-align: center;
 min-height: inherit;
}
.pasta .pastaFooter a { color: var(--pasta-white); text-decoration: none; }
.pasta .pastaFooter a:hover { text-decoration: underline; }
.pasta .pastaFooter nav ul { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.pasta .pastaFooter nav li + li { margin-left: .9rem; padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.85); }
.pasta .pastaFooter nav .active { background: none; color: var(--pasta-white); }
.pastaPermission {
 position: absolute;
 right: .8rem;
 bottom: 16rem;
 z-index: 2;
 margin: 0;
 writing-mode: vertical-lr;
 transform: rotate(180deg);
 font-family: var(--pasta-font-cond);
 font-size: 1.3rem;
 line-height: 1;
 text-transform: uppercase;
 color: rgba(255,255,255,.85);
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     BREAKPOINTS BOOTSTRAP v5.2
=============================//////////////////////////////////////////////*/
@media (max-width: 575.98px) {
 .pasta-packshots { flex-direction: column; align-items: center; }
 .pasta-packshots img { width: 86%; }
 .pasta-packshots img + img { margin-left: 0; margin-top: -1rem; }
 .pasta-banner { margin-top: 2rem; }
 .pasta-social { width: 78%; margin-right: 12%; margin-left: auto; }
 .pastaPermission { bottom: 8rem; font-size: 1.1rem; right: .4rem; }
}
@media (min-width: 992px) {
 .pastaPermission { right: 1.6rem; bottom: 18rem; }
 .toTop { bottom: 60px; right: 50px; }
}
/*==========================/////////////////////==========================*/