/*
 * Grasdruckerei Look – Erscheinungsbild von diegrasdruckerei.de für Astra + WooCommerce.
 * Werte (Farben, Schriften, Größen, Abstände) übernommen aus
 * grasdruckerei-vorschau-v3/assets/css/main.css.
 *
 * Bewusst NICHT angefasst: Produkt-Konfigurator (.gras-cfg). Hero-Bild/-Texte kommen weiter aus dem Hero-Admin.
 * Eigene Variablen heißen --gl-*, weil der Konfigurator bereits --gd-* belegt.
 */

@font-face{font-family:"Francois One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/francois-one-normal-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Francois One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/francois-one-normal-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/newsreader-normal-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/newsreader-normal-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-italic-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-normal-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-normal-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-normal-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --gl-paper:#f1ebdc;
  --gl-paper-2:#e8dfc8;
  --gl-ink:#171614;
  --gl-ink-3:#3b3832;
  --gl-muted:#5c574c;
  --gl-line:rgba(23,22,20,.18);
  --gl-line-strong:rgba(23,22,20,.42);
  --gl-green:#62bb46;
  --gl-green-ink:#2d6a1f;
  --gl-yellow:#ffe500;
  --gl-on-dark:#f4efe3;
  --gl-on-dark-muted:#bdb5a3;
  --gl-field:#fffdf7;
  --gl-radius:2px;
  --gl-ease:cubic-bezier(.2,.7,.1,1);
  --gl-shadow:0 1px 1px rgba(40,30,10,.08),0 12px 24px -8px rgba(40,30,10,.22);
  --gl-shadow-sheet:0 1px 1px rgba(40,30,10,.08),0 12px 24px -8px rgba(40,30,10,.22),0 40px 80px -30px rgba(40,30,10,.35);
  --gl-display:"Francois One","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --gl-text:"Newsreader",Georgia,"Times New Roman",serif;
  --gl-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  /* Astra-Palette auf die Website-Farben umstellen – Astra färbt damit Text, Flächen, Linien, Menüs. */
  --ast-global-color-0:var(--gl-green-ink);
  --ast-global-color-1:var(--gl-green-ink);
  --ast-global-color-2:var(--gl-ink);
  --ast-global-color-3:var(--gl-ink);
  --ast-global-color-4:var(--gl-paper);
  --ast-global-color-5:var(--gl-paper-2);
  --ast-global-color-6:var(--gl-ink);
  --ast-global-color-7:#cac5b8;
  --ast-global-color-8:var(--gl-ink);
}

/* Konfigurator abschirmen: bisherige Astra-Palette und Schrift bleiben dort unverändert. */
.gras-cfg{
  font-family:Lato,sans-serif;
  --ast-global-color-0:#67b547;--ast-global-color-1:#67b547;--ast-global-color-2:#67b547;
  --ast-global-color-3:#334155;--ast-global-color-4:#fff;--ast-global-color-5:#f0f5fa;
  --ast-global-color-6:#111;--ast-global-color-7:#d1d5db;--ast-global-color-8:#111;
  /* Von Astra abgeleitete Variablen werden an :root aufgelöst – hier neu berechnen lassen. */
  --ast-border-color:var(--ast-global-color-7);
  --ast-global-color-primary:var(--ast-global-color-4);--ast-global-color-secondary:var(--ast-global-color-5);
  --ast-global-color-alternate-background:var(--ast-global-color-6);--ast-global-color-subtle-background:var(--ast-global-color-7);
}

/* ---------- Grundlage: Papier, Schrift, Überschriften ---------- */

body{background-color:var(--gl-paper);color:var(--gl-ink);font-family:var(--gl-text);font-size:clamp(17px,.55vw + 14.5px,20px);line-height:1.55;font-kerning:normal;text-rendering:optimizeLegibility}
/* Papierfaser über der Fläche, unter dem Inhalt (z-index:-1 statt Stacking-Umbau wie auf der Website). */
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:url(img/faser-fein.svg);background-size:360px;opacity:.5;mix-blend-mode:multiply;z-index:-1}
::selection{background:var(--gl-yellow);color:var(--gl-ink)}
/* :where() hält die Spezifität bei 0 – Plugin-/Astra-Klassenregeln für Links gewinnen weiterhin. */
a:where(:not(.gras-cfg *)){color:var(--gl-green-ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:where(:not(.gras-cfg *)):hover{color:var(--gl-ink);text-decoration-thickness:2px}
:is(.entry-content,.woocommerce-MyAccount-content) a:where(:not(.button,.wp-element-button,.wp-block-button__link)){text-decoration-line:underline}

:is(h1,h2,h3,h4,h5,h6):not(.gras-cfg *){font-family:var(--gl-display);font-weight:400;color:var(--gl-ink);letter-spacing:.002em;text-wrap:balance}
h1:not(.gras-cfg *),header.entry-header .entry-title{font-size:clamp(2.6rem,6vw,5.6rem);line-height:.9;text-transform:uppercase}
/* Wie auf der Website: nur H1 versal, ab H2 normale Schreibung (Astra setzt hier global uppercase). */
:is(h2,h3,h4,h5,h6):not(.gras-cfg *){text-transform:none}
h2:not(.gras-cfg *){font-size:clamp(2rem,4.4vw,4.2rem);line-height:.96}
h3:not(.gras-cfg *){font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.02}
h4:not(.gras-cfg *),h5:not(.gras-cfg *),h6:not(.gras-cfg *){font-size:1.2rem;line-height:1.1}
/* Konto, Warenkorb, Kasse, Bestellübersicht: Zwischenüberschriften stehen dort in schmalen
   Spalten/Karten („Rechnungsadresse", „Warenkorb-Summe") → kleiner als die Sektionsköpfe der Website. */
:is(.woocommerce-account,.woocommerce-cart,.woocommerce-checkout) .woocommerce h2:not(.gras-cfg *){font-size:clamp(1.5rem,1.1rem + 1vw,2rem);line-height:1.05}

/* Blocks: "Small Caps"-Absatz = Kicker der Website (Mono, Versal, Strich davor). */
.entry-content .is-style-small-caps{font-family:var(--gl-mono);font-size:12.5px;font-variant:normal;letter-spacing:.14em;line-height:1.45;text-transform:uppercase;color:var(--gl-ink-3);display:flex;align-items:center;gap:.8em;margin-bottom:1.4rem}
.entry-content .is-style-small-caps::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.entry-content .is-style-small-caps.has-text-align-center{justify-content:center}

/* ---------- Buttons (wie .btn der Website) ---------- */

/* Achtung: keine IDs in :is() – :is() übernimmt die höchste Spezifität und würde alles überstimmen. */
.woocommerce :is(a.button,button.button,input.button),.woocommerce-page :is(a.button,button.button,input.button),.woocommerce #respond input#submit,
.wp-block-button .wp-block-button__link,.wp-element-button:not(.gras-cfg *),.gras-hero .gras-hero__cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.72em 1.35em .66em;
  border:2px solid var(--gl-ink);border-radius:var(--gl-radius);background:var(--gl-ink);color:var(--gl-paper);box-shadow:none;
  font-family:var(--gl-display);font-size:16px;font-weight:400;letter-spacing:.07em;line-height:1;text-transform:uppercase;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--gl-ease)}
.woocommerce :is(a.button,button.button,input.button):hover,.woocommerce-page :is(a.button,button.button,input.button):hover,.woocommerce #respond input#submit:hover,
.wp-block-button .wp-block-button__link:hover,.wp-element-button:not(.gras-cfg *):hover,.gras-hero .gras-hero__cta:hover{
  background:var(--gl-green-ink);border-color:var(--gl-green-ink);color:var(--gl-paper);text-decoration:none;transform:translateY(-1px)}
.woocommerce :is(.button.disabled,.button:disabled,.button:disabled[disabled]){opacity:.45;transform:none}
/* Outline-Button = .btn--ghost */
.wp-block-buttons .wp-block-button.is-style-outline>.wp-block-button__link.wp-element-button:not(.has-text-color){background:transparent;color:var(--gl-ink);border:2px solid var(--gl-ink);padding:.72em 1.35em .66em;font-family:var(--gl-display);font-size:16px;font-weight:400;line-height:1}
.wp-block-buttons .wp-block-button.is-style-outline>.wp-block-button__link.wp-element-button:not(.has-text-color):hover{background:var(--gl-ink);color:var(--gl-paper);border-color:var(--gl-ink)}

/* ---------- Formularfelder (wie .field der Website) ---------- */

.woocommerce form .form-row :is(input.input-text,textarea,select),.woocommerce-page form .form-row :is(input.input-text,textarea,select),
.woocommerce .quantity input.qty,.woocommerce .coupon input.input-text,.woocommerce-ordering select,#review_form :is(input[type=text],input[type=email],textarea),
.select2-container--default .select2-selection--single{
  border:1.5px solid var(--gl-line-strong);border-radius:var(--gl-radius);background-color:var(--gl-field);color:var(--gl-ink);
  font-family:var(--gl-text);font-size:1rem;min-height:48px;box-shadow:none}
.woocommerce form .form-row :is(input.input-text,textarea,select):focus,.woocommerce .quantity input.qty:focus{outline:3px solid var(--gl-ink);outline-offset:1px;border-color:var(--gl-ink)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:45px;color:var(--gl-ink)}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:45px}
.woocommerce form .form-row label,#review_form label{font-family:var(--gl-mono);font-size:12px;letter-spacing:.06em;line-height:1.5;text-transform:uppercase;color:var(--gl-ink)}
.woocommerce :is(input[type=checkbox],input[type=radio]){accent-color:var(--gl-ink)}

/* ---------- Kopfzeile ---------- */

#masthead :is(.ast-above-header-bar,.ast-primary-header-bar,.main-header-bar){background-color:color-mix(in srgb,var(--gl-paper) 94%,transparent);border-bottom:1px solid var(--gl-line)}
/* Sticky wie auf der Website, auf allen Breiten (das Mobilmenü ist ein Vollbild-Overlay, s. u.). */
#masthead{position:sticky;top:0;z-index:99}
.admin-bar #masthead{top:32px}
@media (max-width:782px){.admin-bar #masthead{top:46px}}
@media (max-width:600px){.admin-bar #masthead{top:0}}
/* Milchglas nur Desktop – backdrop-filter würde das fixe Mobilmenü in der Kopfzeile einsperren. */
@media (min-width:922px){#masthead .ast-above-header-bar{backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}}
/* Beim Scrollen: Linie blendet ein (wie Website) + CMYK-Druckstreifen zeigt den Fortschritt.
   Reines CSS; Browser ohne scroll-driven animations zeigen einfach den statischen Header. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    #masthead :is(.ast-above-header-bar,.ast-primary-header-bar){animation:gl-line linear both;animation-timeline:scroll(root);animation-range:0 24px}
    /* Desktop: Streifen an der oberen Kopfzeile statt am #masthead. Deren backdrop-filter bildet eine
       eigene Ebene, in der das Untermenü steckt – ein Streifen am #masthead läge sonst darüber. */
    #masthead::after,#masthead .ast-above-header-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none;background:linear-gradient(90deg,#00a6e2 0 25%,#e4007c 0 50%,var(--gl-yellow) 0 75%,var(--gl-ink) 0);transform-origin:0 50%;transform:scaleX(0);animation:gl-progress linear both;animation-timeline:scroll(root)}
    @media (min-width:922px){#masthead::after{content:none}}
    @media (max-width:921px){#masthead .ast-above-header-bar::after{content:none}}
  }
}
@keyframes gl-line{from{border-bottom-color:transparent}}
@keyframes gl-progress{to{transform:scaleX(1)}}
#masthead .custom-logo-link img{width:111px;max-width:none;height:auto}
@media (max-width:560px){#masthead .custom-logo-link img{width:83px}}

#ast-desktop-header .main-header-menu>.menu-item>.menu-link{font-family:var(--gl-display);font-size:15.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-ink);text-decoration:underline 2px transparent;text-underline-offset:.55em;transition:text-decoration-color .2s}
#ast-desktop-header .main-header-menu>.menu-item>.menu-link:hover{color:var(--gl-ink);text-decoration-color:var(--gl-line-strong)}
#ast-desktop-header .main-header-menu>:is(.current-menu-item,.current-menu-ancestor)>.menu-link{color:var(--gl-ink);text-decoration-color:var(--gl-green)}
/* z-index: über dem farbigen Scroll-Fortschrittsbalken (.ast-above-header-bar::after, durch transform eigene Ebene) */
#ast-desktop-header .main-header-menu .sub-menu{z-index:10;background:var(--gl-paper);border:1px solid var(--gl-line);border-top:2px solid var(--gl-ink);box-shadow:var(--gl-shadow)}
#ast-desktop-header .main-header-menu .sub-menu .menu-link{font-family:var(--gl-display);font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gl-ink);border-bottom:1px solid var(--gl-line)}
#ast-desktop-header .main-header-menu .sub-menu .menu-item:last-child>.menu-link{border-bottom:0}
#ast-desktop-header .main-header-menu .sub-menu :is(.menu-link:hover,.current-menu-item>.menu-link){background:var(--gl-paper-2);color:var(--gl-ink)}
/* Anordnung wie Website-Header: Logo bündig mit dem Inhalt links, Menü direkt daneben
   (Abstand 32 px, Links 26 px), Icons rechts, 96 px hoch. Astra hat alles in der Mittelspalte. */
@media (min-width:922px){
  #ast-desktop-header .ast-above-header-bar .ast-builder-grid-row{grid-template-columns:auto minmax(0,1fr) auto;column-gap:0}
  #ast-desktop-header .site-header-above-section-center{justify-content:flex-start;gap:clamp(12px,2vw,32px)}
  #ast-desktop-header .site-header-above-section-center>.ast-builder-layout-element{padding-inline:0}
  #ast-desktop-header .site-header-above-section-center>.ast-header-html-1{margin-left:auto}
  #ast-desktop-header .site-branding{padding-block:6px}
  #ast-desktop-header .site-logo-img{padding-right:0}
  #ast-desktop-header .main-header-menu{gap:clamp(10px,1.6vw,26px)}
  #ast-desktop-header .main-header-menu>.menu-item>.menu-link{padding-inline:0}
}
#ast-mobile-header .main-header-menu .menu-link{font-family:var(--gl-display);letter-spacing:.05em;text-transform:uppercase;color:var(--gl-ink)}
#ast-mobile-header .menu-toggle{color:var(--gl-ink)}
#ast-mobile-header .menu-toggle .ast-mobile-svg{fill:var(--gl-ink)}
/* Mobilmenü als dunkles Vollbild wie auf der Website. z-index:-1 legt es im Stacking-Kontext von
   #masthead HINTER die Kopfzeile – Logo und X-Knopf bleiben sichtbar, Astra steuert weiter auf/zu. */
@media (max-width:921px){
  :root{--gl-mh:98px}
  #masthead .ast-primary-header-bar{background-color:var(--gl-paper)}
  #ast-mobile-header .ast-mobile-header-content{position:fixed;inset:0;z-index:-1;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--gl-mh) + 12px) 20px 40px;background:var(--gl-ink);color:var(--gl-on-dark)}
  .admin-bar #ast-mobile-header .ast-mobile-header-content{padding-top:calc(var(--gl-mh) + 58px)}
  #ast-hf-mobile-menu{counter-reset:gl-nav;border:0}
  #ast-mobile-header :is(#ast-hf-mobile-menu,.sub-menu){background:transparent}
  #ast-mobile-header .ast-mobile-header-content .search-form{background:transparent;border-color:rgba(244,239,227,.35)}
  #ast-mobile-header .ast-mobile-header-content :is(.search-field,.search-submit){background:transparent;color:var(--gl-on-dark);border-color:rgba(244,239,227,.35)}
  #ast-mobile-header .ast-mobile-header-content .search-field::placeholder{color:var(--gl-on-dark-muted)}
  #ast-mobile-header .main-header-menu .menu-item{border-color:rgba(244,239,227,.14)}
  #ast-mobile-header .main-header-menu>.menu-item>.menu-link{display:flex;align-items:baseline;gap:.6em;padding:.38em 0;font-size:clamp(2rem,9vw,3.2rem);line-height:1.1;color:var(--gl-on-dark);background:transparent;border-bottom:1px solid rgba(244,239,227,.14)}
  #ast-mobile-header .main-header-menu>.menu-item>.menu-link::before{counter-increment:gl-nav;content:"0" counter(gl-nav);font-family:var(--gl-mono);font-size:11px;letter-spacing:.08em;color:var(--gl-on-dark-muted)}
  #ast-mobile-header .main-header-menu>:is(.current-menu-item,.current-menu-ancestor)>.menu-link{color:var(--gl-green)}
  #ast-mobile-header .main-header-menu .sub-menu .menu-link{font-size:1.15rem;color:var(--gl-on-dark-muted);background:transparent}
  #ast-mobile-header .main-header-menu .sub-menu .menu-link:hover{color:var(--gl-on-dark)}
  #ast-mobile-header .main-header-menu .ast-menu-toggle{color:var(--gl-on-dark)}
  /* Pfeil so hoch wie der Menüpunkt (Schriftgröße × (1,1 Zeilenhöhe + 2 × .38em Abstand)), damit er mittig sitzt */
  #ast-mobile-header .main-header-menu>.menu-item>.ast-menu-toggle{height:calc(clamp(2rem,9vw,3.2rem)*1.86);line-height:calc(clamp(2rem,9vw,3.2rem)*1.86)}
  #ast-mobile-header .ast-mobile-header-content :is(.ast-header-html-1,.ast-header-html-2,.ast-header-search){color:var(--gl-on-dark)}
  /* Konto + Warenkorb unter dem Menü als Menüpunkte 06 und 07 (gleiche Schrift, Abstände,
     Linien wie oben): Nummer · Symbol · Text, Mengen-Badge am Symbol (Raster, gleiche Zelle).
     Lupe entfällt (Suchfeld steht oben). !important nur, weil „Zusätzliches CSS" im
     Customizer diese HTML-Elemente mit !important als Zeile setzt. */
  #ast-mobile-header .ast-mobile-header-content :is(.ast-header-html-1,.ast-header-html-2){display:block !important;width:100% !important;padding:0;margin:0}
  #ast-mobile-header .ast-mobile-header-content :is(.ast-header-html-1,.ast-header-html-2) .ast-builder-html-element{display:block !important}
  #ast-mobile-header .ast-mobile-header-content .ast-header-html-1 .ast-builder-html-element>p,
  #ast-mobile-header .ast-mobile-header-content :is(.gras-search,.gras-user-menu__dropdown){display:none !important}
  #ast-mobile-header .ast-mobile-header-content :is(.gras-user-menu,.gras-cart-icon-wrap){display:block}
  #ast-mobile-header .ast-mobile-header-content :is(.gras-user-icon,.gras-cart-icon){display:grid;grid-template-columns:auto auto 1fr;align-items:baseline;column-gap:.6em;width:100%;padding:.38em 0;font-family:var(--gl-display);font-size:clamp(2rem,9vw,3.2rem);line-height:1.1;letter-spacing:.05em;text-transform:uppercase;color:var(--gl-on-dark);border-bottom:1px solid rgba(244,239,227,.14)}
  #ast-mobile-header .ast-mobile-header-content :is(.gras-user-icon,.gras-cart-icon)::before{grid-column:1;grid-row:1;font-family:var(--gl-mono);font-size:11px;letter-spacing:.08em;color:var(--gl-on-dark-muted)}
  #ast-mobile-header .ast-mobile-header-content .gras-user-icon::before{content:"06"}
  #ast-mobile-header .ast-mobile-header-content .gras-cart-icon::before{content:"07"}
  #ast-mobile-header .ast-mobile-header-content .gras-user-icon::after{content:"Mein Konto"}
  #ast-mobile-header .ast-mobile-header-content .gras-cart-icon::after{content:"Warenkorb"}
  #ast-mobile-header .ast-mobile-header-content :is(.gras-user-icon,.gras-cart-icon)::after{grid-column:3;grid-row:1}
  #ast-mobile-header .ast-mobile-header-content :is(.gras-user-icon,.gras-cart-icon) svg{grid-column:2;grid-row:1;align-self:center;width:.62em;height:.62em}
  #ast-mobile-header .ast-mobile-header-content .gras-cart-icon__badge{grid-column:2;grid-row:1;position:relative;top:auto;right:auto;justify-self:end;align-self:start;transform:translate(45%,-5%)}
}
/* Höhe der mobilen Kopfzeile (Logo 83px bzw. 111px breit) – dort beginnt der Menü-Inhalt. */
@media (min-width:561px) and (max-width:921px){:root{--gl-mh:123px}}

/* ---------- Brotkrumen, Seitentitel ---------- */

.ast-breadcrumbs-wrapper,.ast-breadcrumbs-wrapper :is(.ast-breadcrumbs,.ast-breadcrumbs-name,.trail-items),.woocommerce .woocommerce-breadcrumb{font-family:var(--gl-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-ink-3)}
.ast-breadcrumbs-wrapper .trail-items a,.woocommerce .woocommerce-breadcrumb a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gl-line-strong)}
.ast-breadcrumbs-wrapper .trail-items a:hover,.woocommerce .woocommerce-breadcrumb a:hover{color:var(--gl-ink);border-bottom-color:var(--gl-ink)}
/* Astra setzt die Brotkrumen in eine eigene weiße Leiste – auf der Website stehen sie frei über dem Titel. */
.main-header-bar.ast-header-breadcrumb{background:transparent;border-bottom:0;padding-top:clamp(18px,2.6vw,34px)}
body.woocommerce .woocommerce-products-header__title.page-title{margin-bottom:.35em}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering select{font-family:var(--gl-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-ink-3)}

/* ---------- Produktkacheln (wie .shopcard der Website) ---------- */

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{background:var(--gl-paper-2);aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
/* Der Bild-Link muss den Rahmen füllen, sonst sitzt das Bild oben links statt mittig */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap>a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* Schnellkauf-Tasche von Astra („Modern“-Kacheln) auf dem Bild ausblenden: Klick aufs Bild führt immer zur Produktseite */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap .ast-on-card-button.ast-select-options-trigger{display:none}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{width:82%;height:82%;object-fit:contain;margin:0;filter:drop-shadow(0 12px 14px rgba(60,45,15,.24)) drop-shadow(0 2px 3px rgba(60,45,15,.16));transition:transform .6s var(--gl-ease)}
.woocommerce ul.products li.product:hover .astra-shop-thumbnail-wrap img{transform:translateY(-4px) rotate(-1.5deg)}
.woocommerce ul.products li.product .ast-woo-product-category{font-family:var(--gl-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gl-muted)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--gl-display);font-size:1.2rem;letter-spacing:.05em;line-height:1.1;text-transform:uppercase;color:var(--gl-ink)}
.woocommerce ul.products li.product .ast-loop-product__link:hover .woocommerce-loop-product__title{text-decoration:underline;text-underline-offset:.2em}
.woocommerce ul.products li.product .price{font-family:var(--gl-text);color:var(--gl-ink)}
.woocommerce ul.products li.product .button{background:transparent;color:var(--gl-ink);margin-top:.6em}
.woocommerce ul.products li.product .button:hover{background:var(--gl-ink);border-color:var(--gl-ink);color:var(--gl-paper)}
@media (max-width:544px){.woocommerce ul.products li.product .button{width:100%;min-height:42px;padding:.6em .4em;font-size:13px;letter-spacing:.03em}}

/* ---------- Produktseite (Kopfbereich – Konfigurator bleibt unberührt) ---------- */

.gras-product-gallery .gras-product-gallery__main{background:var(--gl-paper-2);border-color:transparent;border-radius:var(--gl-radius)}
.gras-product-gallery .gras-product-gallery__thumb{background:var(--gl-paper-2)}
.gras-product-gallery .gras-product-gallery__main-img{filter:drop-shadow(0 12px 14px rgba(60,45,15,.24)) drop-shadow(0 2px 3px rgba(60,45,15,.16))}
.gras-product-gallery .gras-product-gallery__lupe{background:var(--gl-ink)}
body.woocommerce div.product .product_title{font-size:clamp(1.9rem,3.2vw,3rem);line-height:.95;color:var(--gl-ink);margin-bottom:.35em}
body.woocommerce div.product .summary .price{font-family:var(--gl-display);font-size:1.6rem;color:var(--gl-ink)}
body.woocommerce div.product .product_meta{font-family:var(--gl-mono);font-size:12px;letter-spacing:.04em;color:var(--gl-ink-3);border-top:1px solid var(--gl-line);padding-top:12px}
body.woocommerce div.product .product_meta a{color:inherit}
body.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--gl-display);letter-spacing:.06em;text-transform:uppercase;color:var(--gl-muted)}
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--gl-ink)}
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active:before{background:var(--gl-ink)}

/* ---------- Startseite: Kontaktleiste, Material, Aufruf-Box ---------- */

/* Kontaktleiste unter der Einleitung (Gruppe mit Klasse gd-kontaktleiste) */
.gd-kontaktleiste{border-top:1px solid var(--gl-line);border-bottom:1px solid var(--gl-line)}
.gd-kontaktleiste p{margin:0;font-family:var(--gl-display);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gl-ink)}
.gd-kontaktleiste .wp-block-buttons{gap:10px 14px}

/* Material: freigestellte Pflanzen über dem Text (Bilder mit Klasse gd-material-bild) */
.gd-material-bild{margin:0 auto 10px;text-align:center}
.gd-material-bild img{height:clamp(150px,18vw,220px);width:auto;max-width:100%;object-fit:contain}
/* Grüne Zierlinie unter h3 (aus den Produktbeschreibungs-Stilen) bei zentrierten Überschriften mittig */
.entry-content h3.has-text-align-center::after{left:50%;transform:translateX(-50%)}

/* Aufruf-Box mit Gräsern (Gruppe mit Klasse gd-cta); Eckstücke liegen in der Mediathek und
   werden mit der Hintergrundfarbe multipliziert. Steht hier statt im Block-Feld „Zusätzliches CSS",
   weil Speichern über die Shop-Schnittstelle dieses Feld leert. */
.gd-cta{background-image:url(/wp-content/uploads/2026/10/cta-gras-links.webp),url(/wp-content/uploads/2026/10/cta-gras-rechts.webp);background-repeat:no-repeat;background-position:left bottom,right bottom;background-size:auto min(58%,clamp(110px,25vw,270px)),auto calc(min(58%,clamp(110px,25vw,270px))*.78);background-blend-mode:multiply}

/* ---------- Pflichthinweise (Preise, Kasse) und Widerrufsformular ---------- */

.gras-price-note,.gras-cfg__price-note{display:block;margin-top:2px;font-family:var(--gl-text);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--gl-muted)}
.gras-cfg__price-note{margin:10px 0 0}
:is(.gras-price-note,.gras-cfg__price-note,.gras-checkout-legal) a{color:inherit;text-decoration:underline;text-underline-offset:.15em}
.gras-checkout-legal{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--gl-ink-3)}
.gras-withdrawal{max-width:560px}
.gras-withdrawal .form-row{display:flex;flex-direction:column;gap:4px;margin:0 0 16px}
.gras-withdrawal :is(input[type=text],input[type=email],textarea){width:100%}
.gras-withdrawal small{font-size:12px;color:var(--gl-muted)}
.gras-withdrawal table{margin:14px 0}

/* ---------- Hinweise (wie .alert der Website) ---------- */

.woocommerce :is(.woocommerce-message,.woocommerce-info,.woocommerce-error),.woocommerce-page :is(.woocommerce-message,.woocommerce-info,.woocommerce-error){border:0;border-left:4px solid var(--gl-green-ink);border-radius:0;background:#f3faef;color:var(--gl-ink)}
.woocommerce :is(.woocommerce-info),.woocommerce-page .woocommerce-info{border-left-color:#ffc800;background:#fffbeb}
.woocommerce .woocommerce-error,.woocommerce-page .woocommerce-error{border-left-color:#b3261e;background:#fff5f3}
.woocommerce :is(.woocommerce-message,.woocommerce-info,.woocommerce-error)::before{color:currentColor}

/* ---------- Tabellen, Warenkorb, Kasse, Konto ---------- */

.woocommerce table.shop_table{border:0;border-top:2px solid var(--gl-ink);border-radius:0;border-collapse:collapse;background:transparent}
.woocommerce table.shop_table :is(th,td){border-color:var(--gl-line)}
.woocommerce table.shop_table thead th,.woocommerce table.shop_table tfoot th{font-family:var(--gl-mono);font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--gl-ink-3)}
.woocommerce table.shop_table .product-name a{font-family:var(--gl-display);letter-spacing:.04em;text-transform:uppercase;color:var(--gl-ink);text-decoration:none}
.woocommerce-cart .cart-collaterals .cart_totals,.woocommerce-checkout #order_review,.woocommerce-checkout #payment{background:transparent;border-radius:0}
.woocommerce-checkout #payment,.woocommerce-checkout #payment div.payment_box{background:var(--gl-paper-2)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--gl-paper-2)}
/* Zahlungsarten: Innenabstand statt Radios am Rand, Trennlinien, Detailbox in hellem Papier
   (Astra setzt sie mit höherer Spezifität grau, daher .woocommerce-page) */
.woocommerce-checkout #order_review .ppcp-messages{margin-bottom:12px}
.woocommerce-checkout #payment{padding:.6em 1.25em 0}
.woocommerce-checkout #payment ul.payment_methods{margin:0;padding:0;border:0}
.woocommerce-checkout #payment ul.payment_methods > li{padding:.7em 0;margin:0}
.woocommerce-checkout #payment ul.payment_methods > li + li{border-top:1px solid var(--gl-line)}
.woocommerce-page.woocommerce-checkout #payment div.payment_box{background:var(--gl-paper);margin:.8em 0 .1em;padding:1em}
.woocommerce-page.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--gl-paper)}
.woocommerce-checkout #payment .place-order{padding:.9em 0 1.25em;margin:0;border-top:1px solid var(--gl-line)}
/* „Weiter zur Kasse“ so hoch wie der PayPal-Button darunter (48 px) statt 76 px,
   mit gleichem Abstand zum PayPal-Hinweis darüber und zum PayPal-Button darunter */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{padding:.55em 1em;font-size:1em;line-height:1.5;margin-bottom:12px}
.woocommerce-cart .wc-proceed-to-checkout .ppcp-messages{margin-bottom:12px}

.woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--gl-ink)}
.woocommerce-MyAccount-navigation ul li{border:0;border-bottom:1px solid var(--gl-line);margin:0}
.woocommerce-MyAccount-navigation ul li a{display:block;padding:.75em .2em;font-family:var(--gl-display);letter-spacing:.05em;text-transform:uppercase;color:var(--gl-ink);text-decoration:none}
.woocommerce-MyAccount-navigation ul li:is(.is-active,:hover) a{color:var(--gl-green-ink);background:transparent}

.woocommerce nav.woocommerce-pagination ul,.woocommerce nav.woocommerce-pagination ul li{border-color:var(--gl-line)}
.woocommerce nav.woocommerce-pagination ul li :is(a,span){font-family:var(--gl-mono);color:var(--gl-ink)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--gl-ink);color:var(--gl-paper)}

/* ---------- Hero als Landschaft ----------
   Bild aus dem Hero-Admin (Papierwelle mit Feldern) vollflächig; sein heller Himmel läuft oben und
   unten weich in den Papierton der Seite aus, Headline + Button stehen im Himmel.
   Beim Laden rastet die Headline aus leicht versetzten Farben (C/M/Y) ins Schwarz ein („Passer"),
   beim Scrollen zoomt die Landschaft langsam heran und der Text zieht schneller nach oben weg.
   Technik: .gras-hero malt sein Bild nicht selbst (background-size:0), ::before erbt es.
   Bild, Headline und Button kommen weiter aus dem Hero-Admin; Textfarbe/Position dort wirken nicht. */
.gras-hero.gras-hero{--gl-hero-x:max(20px,calc((100% - var(--ast-normal-container-width,1200px)) / 2));--gl-hero-h:max(480px,min(52.7vw,100svh - 97px));isolation:isolate;background-size:0 0;background-color:transparent;min-height:var(--gl-hero-h);align-items:flex-start}
.gras-hero::before,.gras-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.gras-hero::before{background-image:inherit;background-size:cover;background-position:50% 30%;background-repeat:no-repeat;transform-origin:50% 62%;
  -webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)}
/* Unten weicher Übergang in den Papierton (bleibt stehen, während das Bild beim Scrollen wandert);
   heller Dunst hinter dem Text, damit die Headline auch über den Hügeln gut lesbar bleibt. */
.gras-hero::after{background:linear-gradient(to top,var(--gl-paper),transparent 12%),radial-gradient(58% 64% at 20% 22%,color-mix(in srgb,var(--gl-paper) 88%,transparent),transparent 74%)}
.gras-hero.gras-hero .gras-hero__inner{width:min(100%,calc(var(--gl-hero-x) + 760px));max-width:none;margin:0;padding:clamp(40px,6vw,96px) 24px 48px var(--gl-hero-x);text-align:left;color:var(--gl-ink)}
.gras-hero .gras-hero__headline{color:var(--gl-ink);text-shadow:none;font-family:var(--gl-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,5vw,5.2rem);line-height:.88;letter-spacing:-.004em;max-width:9.5em;margin-bottom:.45em}
@media (max-width:900px){
  /* Mobil: Text oben im Papier, Landschaft darunter (Himmel läuft in den Text hinein). */
  .gras-hero.gras-hero{--gl-hero-h:calc(max(210px,56vw) + 190px);display:block;min-height:0;padding-bottom:max(210px,56vw)}
  .gras-hero.gras-hero .gras-hero__inner{width:auto;padding:36px 20px 0}
  .gras-hero::before{top:auto;height:calc(max(210px,56vw) + 20vw);background-position:76% 70%}
  .gras-hero::after{background:linear-gradient(to top,var(--gl-paper),transparent 12%)}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    /* Läuft genau so lange, bis der Banner aus dem Bild gescrollt ist (--gl-hero-h). */
    .gras-hero::before{animation:gl-hero-zoom linear both;animation-timeline:scroll(root);animation-range:0 var(--gl-hero-h)}
    .gras-hero.gras-hero .gras-hero__inner{animation:gl-hero-lift linear both;animation-timeline:scroll(root);animation-range:0 calc(var(--gl-hero-h) * .85)}
  }
}
@media (prefers-reduced-motion:no-preference){
  .gras-hero .gras-hero__headline{animation:gl-passer 1.1s cubic-bezier(.3,.6,.3,1) .2s both}
}
@keyframes gl-hero-zoom{to{transform:translateY(24%) scale(1.14)}}
@keyframes gl-hero-lift{to{transform:translateY(-12vh);opacity:0}}
@keyframes gl-passer{
  0%{color:rgba(23,22,20,0);text-shadow:-.07em .035em 0 rgba(0,166,226,.8),.06em -.03em 0 rgba(228,0,124,.75),.025em .06em 0 rgba(255,229,0,.9)}
  35%{color:rgba(23,22,20,.35)}
  100%{color:var(--gl-ink);text-shadow:0 0 0 rgba(0,166,226,0),0 0 0 rgba(228,0,124,0),0 0 0 rgba(255,229,0,0)}
}

/* ---------- Fußzeile (dunkel wie auf der Website) ---------- */

/* Aufbau wie .site-footer der Website (footer.php): breite Kontakt-Spalte (ohne Logo, das steht im Sticky-Header) + drei Spalten,
   Nachweis-Zeile mit weißen Logos, Copyright in Mono. HTML bleibt das aus dem Astra-Footer (#gd-footer);
   #colophon-Präfix nötig, weil das Customizer-Zusatz-CSS nach dem Plugin lädt. */
#colophon :is(.site-above-footer-wrap,.site-primary-footer-wrap,.site-below-footer-wrap){background-color:var(--gl-ink);color:var(--gl-on-dark)}
#colophon .site-above-footer-wrap{padding:clamp(56px,7vw,100px) 0 0;border-top:1px solid rgba(244,239,227,.12)}
/* Gleiche Flucht wie .ast-container (Kopfzeile/Inhalt): Astra-Container-Breite + 20px Rand. */
#colophon :is(.site-above-footer-inner-wrap,.site-below-footer-inner-wrap){max-width:calc(var(--ast-normal-container-width,1200px) + 40px);margin-inline:auto;padding-inline:20px}
#colophon #gd-footer{max-width:none;padding:0;font-size:.92em;color:var(--gl-on-dark);text-align:left}
#colophon #gd-footer :is(li,p){font-size:inherit;line-height:1.5}
#colophon #gd-footer li{margin:0}
#colophon #gd-footer li a{display:inline-flex;align-items:center;min-height:36px}
#colophon #gd-footer a:hover{opacity:1;text-decoration:underline;text-underline-offset:.2em}
#colophon #gd-footer h3{font-family:var(--gl-display);font-weight:400;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--gl-on-dark-muted);margin:0 0 14px}
#colophon #gd-footer .gd-footer-columns{grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,48px);margin:0}
#colophon #gd-footer .gd-footer-column{padding:0}
#colophon #gd-footer .gd-footer-column::after{display:none}
/* Kontakt-Spalte wird zur Marken-Spalte vorne, mit Logo darüber. */
#colophon #gd-footer .gd-footer-column:last-child{order:-1}
#colophon #gd-footer .gd-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:18px 40px;margin-top:38px;padding-top:24px;border-top:1px solid rgba(244,239,227,.14)}
/* Unterste Zeile: Copyright links (steht im Footer-HTML, [copyright] [current_year] ersetzt Astra), Siegel rechts;
   bis 921px untereinander, Siegel zuerst */
#colophon #gd-footer .gd-footer-bottom{justify-content:space-between;padding-bottom:8px}
#colophon #gd-footer .gd-footer-copyright{flex:1 1 22em;max-width:34em;margin:0;font-family:var(--gl-mono);font-size:11.5px;letter-spacing:.04em;line-height:1.6;color:var(--gl-on-dark-muted)}
#colophon #gd-footer .gd-footer-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:20px 44px;width:auto}
@media (max-width:921px){#colophon #gd-footer .gd-footer-logos{order:-1;width:100%;justify-content:flex-start}}
#colophon #gd-footer .gd-footer-logos img{height:44px;width:auto;max-width:100%;filter:brightness(0) invert(1);opacity:.82}
/* Siegel optisch gleich schwer: natureOffice ist hoch, e.optimum flach und breit */
#colophon #gd-footer .gd-footer-logos img.gd-logo-natureoffice{height:62px}
#colophon #gd-footer .gd-footer-logos img.gd-logo-eoptimum{height:31px}
#colophon #gd-footer .gd-footer-logos br{display:none} /* setzt WordPress (wpautop) zwischen die Bilder */
/* Tablet: Kontakt über die ganze Breite, darunter Social Media · Highlights · Rechtliches nebeneinander */
@media (max-width:921px){
  #colophon #gd-footer .gd-footer-columns{grid-template-columns:repeat(3,minmax(0,1fr))}
  #colophon #gd-footer .gd-footer-column:last-child{grid-column:1/-1}
}
/* Handy: Social Media | Highlights nebeneinander, Rechtliches über die Breite in zwei Spalten,
   Siegel etwas kleiner, damit beide in eine Zeile passen */
@media (max-width:600px){
  #colophon #gd-footer .gd-footer-columns{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:28px}
  #colophon #gd-footer .gd-footer-column:nth-child(3){grid-column:1/-1}
  #colophon #gd-footer .gd-footer-column:nth-child(3) ul{column-count:2;column-gap:20px}
  #colophon #gd-footer .gd-footer-column:nth-child(3) li{break-inside:avoid}
  #colophon #gd-footer li a{min-height:32px}
  #colophon #gd-footer .gd-footer-logos{gap:16px 24px}
  #colophon #gd-footer .gd-footer-logos img.gd-logo-natureoffice{height:46px}
  #colophon #gd-footer .gd-footer-logos img.gd-logo-eoptimum{height:23px}
}
#colophon .site-below-footer-wrap{padding:28px 0;border-top:0}
#colophon .site-below-footer-wrap .site-footer-section{justify-content:flex-start}
#colophon .ast-footer-copyright,#colophon .ast-footer-copyright p{font-family:var(--gl-mono);font-size:11.5px;letter-spacing:.04em;text-align:left;justify-content:flex-start;color:var(--gl-on-dark-muted)}
#colophon .ast-footer-copyright a{color:var(--gl-on-dark)}
#ast-scroll-top{background-color:var(--gl-ink);color:var(--gl-paper);border-radius:var(--gl-radius)}

/* ---------- Bestelldetails (Kundenkonto, Bestellbestätigung) auf dem Handy ----------
   Die Aktions-Buttons („Auftragsbestätigung ansehen") stehen in der schmalen Betragsspalte;
   das lange Wort in Versalien sprengt dort die Tabelle. Daher: Zeilen als Raster, Fußzeilen
   mit Bezeichnung über dem Wert, Buttons über die volle Breite. */
@media (max-width:544px){
  .woocommerce-table--order-details,
  .woocommerce-table--order-details thead,
  .woocommerce-table--order-details tbody,
  .woocommerce-table--order-details tfoot{display:block;width:100%}
  .woocommerce-table--order-details tr{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .woocommerce-table--order-details tfoot tr{grid-template-columns:minmax(0,1fr)}
  .woocommerce-table--order-details th,
  .woocommerce-table--order-details td{display:block;min-width:0}
  .woocommerce-table--order-details tfoot th{border-bottom:0;padding-bottom:0}
  .woocommerce-table--order-details .order-actions-button{display:block;width:100%;box-sizing:border-box;margin:0 0 8px;text-align:center;overflow-wrap:anywhere}
}

/* iPhone/iPad: Safari zoomt beim Antippen in Felder unter 16px hinein und die Seite wirkt
   danach zu breit. Nur iOS (-webkit-touch-callout), andere Geräte bleiben unverändert. */
@supports (-webkit-touch-callout:none){
  input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  select,
  textarea{font-size:16px !important}
}