/* =========================================================================
   Arlt's Backstuben – Gestaltungsebene
   ERZEUGT von pr-setup (part2) aus part0-style.php – nicht von Hand aendern.
   Design-Richtung: C – Edel / Editorial mit runden Formen (Arlt)
   Autor: Philipp Ramsch · www.philippramsch.de
   Ergaenzt arlt.css, veraendert sie nicht. Zum Zurueckdrehen die Enqueue-Zeile
   mit dem Handle "arlt-warm" in mu-plugins/arlt-site.php entfernen.
   ========================================================================= */

/* --- Akzentschrift: lokal gehostet, kein externer Request (DSGVO) -------- */
@font-face{
  font-family:'Arlt Script';
  src:url('accent.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}

/* --- Abgeleitete Werte der Marken-Palette ------------------------------- */
:root{
  --arlt-primary-light:#7C3A11;
  --arlt-primary-deep:#4E2308;
  --arlt-h1:86px;--arlt-h2:58px;
  --arlt-gold-soft:rgba(186,155,119,.42);
  --arlt-gold-line:rgba(186,155,119,.68);
  --arlt-shadow-s:0 2px 8px rgba(48,39,31,.07);
  --arlt-shadow-m:0 16px 38px -20px rgba(48,39,31,.42);
  --arlt-shadow-l:0 30px 60px -28px rgba(48,39,31,.52);
  /* Feines Papierkorn als Inline-SVG – keine zusaetzliche Datei, kein Request */
  --arlt-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* --- Grundflaeche: warmer Verlauf statt flaechigem Creme ----------------- */
body{
  background-color:var(--arlt-cream);
  background-image:
    radial-gradient(1100px 620px at 50% -260px,#F7EDDF 0%,rgba(247,237,223,0) 72%),
    radial-gradient(900px 700px at 108% 18%,rgba(186,155,119,.13) 0%,rgba(186,155,119,0) 65%);
  background-repeat:no-repeat;
  background-attachment:scroll;
}
::selection{background:var(--arlt-primary);color:var(--arlt-cream)}

/* --- Textur auf allen Abschnitten ---------------------------------------- */
.arlt-section{position:relative;isolation:isolate}
.arlt-section:before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--arlt-grain);background-size:160px 160px;
  opacity:.045;mix-blend-mode:multiply;
}
.arlt-section>.e-con-inner{position:relative;z-index:1}

/* --- Akzentschrift in Ueberschriften ------------------------------------- */
h1 em,h2 em,.arlt-cta h2 em,.arlt-footer h2 em{
  font-family:'Arlt Script','Arlt Display',Georgia,serif;
  font-style:normal;font-weight:400;
  font-size:1.16em;line-height:.86;
  letter-spacing:.005em;
  color:var(--arlt-primary);
  display:inline-block;
  padding:0 .07em .12em .1em;
  vertical-align:baseline;
}
.arlt-cta h2 em,.arlt-footer h2 em{color:var(--arlt-gold)}
h1,h2{text-wrap:balance}

/* --- Eyebrow: Goldstrich mit Raute --------------------------------------- */
.arlt-eyebrow p:before{
  width:34px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--arlt-primary),var(--arlt-gold));
}

/* --- Abschnittskopf mit Goldlinie ---------------------------------------- */
.arlt-section-heading{padding-bottom:20px;position:relative}
.arlt-section-heading:after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--arlt-gold-line),rgba(186,155,119,0) 62%);
}

/* --- Bilder: Goldkante, Tiefe, ruhiges Anheben --------------------------- */
.arlt-photo img,
.arlt-card-photo img,
.arlt-story-photo img,
.arlt-torte-photo img,
.arlt-hero-visual img,
.arlt-catalog-photo img{
  box-shadow:var(--arlt-shadow-m);
  /* Fruehere Zierlinie (1 px Gold, 9 px nach innen versetzt) entfernt:
     sie wirkte wie eine versehentlich nachgezogene Kontur. */
  outline:0!important;
}
.arlt-catalog-photo img{box-shadow:var(--arlt-shadow-s),var(--arlt-shadow-m)}
.arlt-catalog-photo a:hover img{box-shadow:var(--arlt-shadow-l)}

/* --- Hero: warmer Schein, doppelter Goldrahmen, Siegel ------------------- */
.arlt-hero{overflow:visible}
.arlt-hero-visual:before{
  content:'';position:absolute;z-index:-2;
  inset:-9% -14% -6% -10%;
  background:radial-gradient(closest-side,rgba(186,155,119,.32),rgba(186,155,119,0) 78%);
  pointer-events:none;
}
.arlt-hero-visual:after{border-color:var(--arlt-gold-line);border-width:1px}
.arlt-hero-visual img{box-shadow:var(--arlt-shadow-l)}

.arlt-seal{
  background:linear-gradient(160deg,#FFFDF9 0%,var(--arlt-cream) 55%,#F3E9DA 100%);
  border:1px solid var(--arlt-gold);
  box-shadow:0 14px 34px -14px rgba(48,39,31,.42);
  transform:rotate(-2.2deg);
}
.arlt-seal strong{display:block;margin-bottom:2px}

/* --- Vertrauensband: goldene Ziffern, Trennlinien ------------------------ */
.arlt-trust{
  background:linear-gradient(180deg,var(--arlt-sand),#EAE0D2);
  border-top:1px solid var(--arlt-gold-line);
  border-bottom:1px solid var(--arlt-gold-line);
}
.arlt-trust-row .elementor-widget{
  font-family:'Arlt Display',Georgia,serif;font-size:13px;color:#7E5C33;
  letter-spacing:.14em;
}
.arlt-trust-row strong{
  font-family:'Arlt Text',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.09em;color:var(--arlt-ink);text-transform:uppercase;
}

/* --- Karten: echte Flaeche, Goldkante, Hover-Tiefe ---------------------- */
.arlt-card{
  --arlt-card-pad:24px;
  --padding-top:0;--padding-bottom:28px;
  --padding-left:var(--arlt-card-pad);--padding-right:var(--arlt-card-pad);
  /* Elementor schreibt fuer jede Spalte eine eigene Regel padding:0.
     Diese Zeile setzt den Innenabstand der Karten verbindlich durch. */
  padding:0 var(--arlt-card-pad) var(--arlt-card-bottom,28px)!important;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFAF5 100%);
  border:1px solid var(--arlt-line);
  box-shadow:var(--arlt-shadow-s);
  /* Kein overflow:hidden mehr auf der Karte selbst – das Foto beschneidet
     sich in .arlt-card > .arlt-card-photo bereits selbst. So darf die
     unsichtbare Klickflaeche ueber die abgerundeten Ecken hinausreichen. */
  transition:box-shadow .24s ease,border-color .24s ease,background .24s ease;
}
/* Karten werden beim Zeigen NICHT mehr angehoben. Ein verschobener Kasten
   rutscht unter dem Mauszeiger weg, der Zeiger verlaesst die Flaeche, die
   Karte faellt zurueck – daraus entsteht das Flackern zwischen Pfeil und
   Hand. Die Rueckmeldung kommt jetzt ueber Goldkante, Tiefe und Bildzoom. */
.arlt-card:hover{
  border-color:var(--arlt-gold);
  box-shadow:var(--arlt-shadow-l);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFCF7 100%);
}
.arlt-card>.arlt-card-photo{
  margin-left:calc(-1 * var(--arlt-card-pad));
  margin-right:calc(-1 * var(--arlt-card-pad));
  width:calc(100% + 2 * var(--arlt-card-pad))!important;
  max-width:none!important;
  overflow:hidden;
}
.arlt-card .arlt-card-photo img{
  outline:0;box-shadow:none;
  transition:transform .55s ease;
}
.arlt-card:hover .arlt-card-photo img{transform:scale(1.055)}
/* Kartentitel: auf der Startseite eine echte Ueberschrift (h3), im
   Aufklappmenue nur Navigationstext (div.arlt-card-title). Beide sehen gleich aus. */
.arlt-card .arlt-card-title .elementor-heading-title{
  font-family:'Arlt Display',Georgia,serif;font-weight:500;letter-spacing:-.01em;
  color:#30271F;line-height:1.2;
}
.arlt-card h3,
.arlt-card .arlt-card-title{position:relative;padding-bottom:12px}
.arlt-card h3:after,
.arlt-card .arlt-card-title:after{
  content:'';position:absolute;left:0;bottom:0;width:36px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--arlt-primary),var(--arlt-gold));
  transition:width .24s ease;
}
.arlt-card:hover h3:after,
.arlt-card:hover .arlt-card-title:after{width:64px}

/* --- Sandband: waermer, mit Goldsaum ------------------------------------ */
.arlt-sand{
  background:linear-gradient(180deg,#F2EADF 0%,var(--arlt-sand) 45%,#E9DECE 100%);
  border-top:1px solid rgba(186,155,119,.34);
  border-bottom:1px solid rgba(186,155,119,.34);
}

/* --- Schaltflaechen: Verlauf, Goldsaum, klarer Hover --------------------- */
.arlt-button:not(.arlt-text-button) .elementor-button,
.arlt-map-load,
.arlt-map-reset{
  background:linear-gradient(180deg,var(--arlt-primary-light) 0%,var(--arlt-primary) 58%,var(--arlt-primary-deep) 100%);
  border-color:var(--arlt-primary-deep);
  letter-spacing:.075em;
  text-transform:uppercase;
  font-size:12.5px;
  box-shadow:0 12px 26px -14px rgba(78,35,8,.75),inset 0 1px 0 rgba(255,255,255,.16);
}
.arlt-button:not(.arlt-text-button) .elementor-button:hover{
  background:linear-gradient(180deg,#8B4514 0%,#6D330D 60%,#54270A 100%);
  color:var(--arlt-white);
  box-shadow:0 18px 34px -14px rgba(78,35,8,.8),inset 0 1px 0 rgba(255,255,255,.22);
}
.arlt-map-reset{
  background:linear-gradient(180deg,#FFFDF9,var(--arlt-cream));
  color:var(--arlt-primary);border:1px solid var(--arlt-gold);
  box-shadow:var(--arlt-shadow-s);
}
.arlt-button.arlt-text-button .elementor-button{
  letter-spacing:.055em;text-transform:uppercase;font-size:12.5px;
  border-bottom-width:2px;border-bottom-color:var(--arlt-gold);
  transition:border-color .2s ease,letter-spacing .2s ease;
}
.arlt-button.arlt-text-button .elementor-button:hover{
  border-bottom-color:var(--arlt-primary);letter-spacing:.085em;
}
.arlt-button.arlt-light .elementor-button{
  background:linear-gradient(180deg,#FFFDF8,var(--arlt-cream));
  color:var(--arlt-primary);border-color:var(--arlt-cream);
  box-shadow:0 12px 26px -14px rgba(20,14,9,.6);
}
.arlt-button.arlt-light .elementor-button:hover{
  background:var(--arlt-white);color:var(--arlt-primary-deep);
}
.arlt-button.arlt-outline-light .elementor-button{
  background:transparent;border-color:var(--arlt-gold);color:var(--arlt-cream);
  box-shadow:none;
}
.arlt-button.arlt-outline-light .elementor-button:hover{
  background:rgba(186,155,119,.2);border-color:var(--arlt-cream);
}

/* --- Kopfbereich: Krustenband, warmer Verlauf, Goldsaum ------------------ */
.elementor-location-header{box-shadow:0 8px 26px -20px rgba(48,39,31,.55)}
.arlt-header{
  background:linear-gradient(180deg,#FFFDF9 0%,var(--arlt-cream) 100%);
  border-bottom:1px solid var(--arlt-gold-line);
}
.arlt-header:before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--arlt-primary) 0%,var(--arlt-gold) 42%,var(--arlt-primary-light) 72%,var(--arlt-gold) 100%);
}
.arlt-wordmark .elementor-heading-title{color:var(--arlt-primary)}
.arlt-menu .e-n-menu-title:hover .e-n-menu-title-text{color:var(--arlt-primary)}
.arlt-menu .e-n-menu-title{position:relative}
.arlt-header-cta .elementor-button{letter-spacing:.08em}
@media(min-width:1025px){
  .arlt-menu .e-n-menu-wrapper{background:transparent}
  /* Das Aufklappmenue soll unter dem gesamten Kopfbereich beginnen und nicht
     ueber der Wortmarke liegen. Bezugspunkt wird .arlt-header (position:relative),
     dadurch trifft top:100% immer genau die Unterkante des Kopfbereichs -
     unabhaengig von der Kopfhoehe im jeweiligen Breitenbereich. */
  .arlt-header .e-n-menu,
  .arlt-header .arlt-menu{position:static}
  .arlt-header .e-n-menu-content{
    top:100%!important;left:0!important;right:0!important;
    width:auto!important;
  }
}
.arlt-menu-panel{
  background:linear-gradient(180deg,#FFFDF9,var(--arlt-cream));
  border-color:var(--arlt-gold-line);
  box-shadow:0 26px 50px -26px rgba(48,39,31,.5);
}

/* --- Handlungsband (CTA): Textur, Goldrahmen ---------------------------- */
.arlt-cta{
  border-top:1px solid rgba(186,155,119,.55);
  border-bottom:1px solid rgba(186,155,119,.55);
  background:
    radial-gradient(760px 420px at 12% -10%,rgba(186,155,119,.3) 0%,rgba(186,155,119,0) 60%),
    linear-gradient(160deg,var(--arlt-primary-light) 0%,var(--arlt-primary) 46%,var(--arlt-primary-deep) 100%);
  color:var(--arlt-cream);
}
.arlt-cta:before{opacity:.09;mix-blend-mode:overlay}
.arlt-cta .arlt-eyebrow p:before{background:linear-gradient(90deg,var(--arlt-gold),rgba(186,155,119,.25))}

/* --- Fussbereich: Goldsaum, Textur, warme Tiefe ------------------------- */
.arlt-footer{
  background:
    radial-gradient(900px 460px at 82% -20%,rgba(186,155,119,.16) 0%,rgba(186,155,119,0) 62%),
    linear-gradient(180deg,#392F25 0%,var(--arlt-ink) 60%,#241D16 100%);
  border-top:3px solid var(--arlt-gold);
}
.arlt-footer:before{opacity:.07;mix-blend-mode:overlay}
.arlt-footer h3{color:var(--arlt-gold)}
.arlt-footer .arlt-links .elementor-icon-list-text{transition:color .18s ease}
.arlt-footer .arlt-links .elementor-icon-list-item a:hover .elementor-icon-list-text{color:var(--arlt-gold)}
.arlt-copyright{border-top-color:var(--arlt-gold-soft)}

/* --- Filialen: Karten, Karte, Suchfeld ---------------------------------- */
.arlt-location-card{
  background:linear-gradient(180deg,#FFFFFF,#FDFAF5);
  border-color:var(--arlt-line);
  box-shadow:var(--arlt-shadow-s);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.arlt-location-card:hover{
  border-color:var(--arlt-gold);box-shadow:var(--arlt-shadow-m);
}
.arlt-location-card [data-map-focus]{
  display:flex;align-items:center;gap:9px;width:100%;
  white-space:normal;
}
.arlt-location-card .arlt-number{
  display:grid;place-items:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:50%;
  background:var(--arlt-primary);color:var(--arlt-cream);font-size:11px;
  margin-right:0;
}
/* Lange Strassennamen umbrechen, statt die Liste waagerecht scrollen zu lassen */
.arlt-location-card h3{overflow-wrap:anywhere;hyphens:auto}
.arlt-location-results{overflow-x:hidden}
.arlt-map{border-color:var(--arlt-gold-line);box-shadow:inset 0 2px 14px rgba(48,39,31,.08)}
.arlt-map-consent{background:linear-gradient(180deg,#FFFDF9,var(--arlt-cream));border-color:var(--arlt-gold-line)}
.arlt-location-search{border-color:var(--arlt-gold-line)}
.arlt-branch-detail{
  background:linear-gradient(180deg,#F3EBE0,var(--arlt-sand));
  border:1px solid var(--arlt-gold-line);
}

/* --- Formular: warme Flaeche, Goldakzent -------------------------------- */
.arlt-form-card{
  background:linear-gradient(180deg,#FFFFFF,#FDFAF5);
  border-color:var(--arlt-line);
  box-shadow:var(--arlt-shadow-m);
  position:relative;
}
.arlt-form-card:before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--arlt-primary),var(--arlt-gold));
}
.arlt-contact-form button{
  background:linear-gradient(180deg,var(--arlt-primary-light) 0%,var(--arlt-primary) 58%,var(--arlt-primary-deep) 100%)!important;
  text-transform:uppercase;letter-spacing:.075em;font-size:13px;
  box-shadow:0 12px 26px -14px rgba(78,35,8,.75),inset 0 1px 0 rgba(255,255,255,.16);
}
.arlt-contact-form button:hover{
  background:linear-gradient(180deg,#8B4514 0%,#6D330D 60%,#54270A 100%)!important;
}
.arlt-contact-form input:focus,
.arlt-contact-form select:focus,
.arlt-contact-form textarea:focus{border-color:var(--arlt-primary)!important}

/* --- Fragen & Antworten -------------------------------------------------- */
.arlt-faq{border-top-color:var(--arlt-gold-soft)}
.arlt-faq h3{position:relative;padding-left:22px}
.arlt-faq h3:before{
  content:'';position:absolute;left:0;top:.52em;width:7px;height:7px;
  background:var(--arlt-gold);transform:rotate(45deg);
}

/* --- Geschichtsabschnitt: Bild mit Goldrahmen dahinter ------------------ */
.arlt-story-photo,.arlt-torte-photo{position:relative}
/* Der zuvor hier gezeichnete Goldrahmen (16 px nach rechts und unten versetzt)
   ist entfernt. Er las sich als nachgezogene Linie und nicht als Gestaltung. */
.arlt-torte-photo img{box-shadow:var(--arlt-shadow-l)}

/* --- Tablet ------------------------------------------------------------- */
@media(max-width:1024px){
  .arlt-card{--arlt-card-pad:20px;--padding-bottom:24px;--arlt-card-bottom:24px}
  .arlt-seal{transform:none}
}

/* --- Smartphone --------------------------------------------------------- */
@media(max-width:767px){
  .arlt-card{--arlt-card-pad:18px;--padding-bottom:22px;--arlt-card-bottom:22px}
  h1 em,h2 em{font-size:1.1em}
  .arlt-trust-row .elementor-widget{font-size:11px;letter-spacing:.1em}
  .arlt-trust-row strong{font-size:9.5px;letter-spacing:.05em}
  .arlt-button .elementor-button,.arlt-button.arlt-text-button .elementor-button{font-size:12px}
  .arlt-entdecken p{font-size:12px}
}

/* --- Reduzierte Bewegung: Hover-Verschiebungen aus --------------------- */
@media(prefers-reduced-motion:reduce){
  .arlt-card:hover,.arlt-location-card:hover,.arlt-catalog-photo a:hover img{transform:none}
  .arlt-card:hover .arlt-card-photo img{transform:none}
}

/* =========================================================================
   Stil C – Edel / Editorial: Typo-Skala, Vollbild-Hero, Zierlinien
   ========================================================================= */

/* --- Groessere Display-Typo, ruhigerer Fliesstext --------------------- */
h3.elementor-heading-title{font-size:32px}
body{font-size:18px;line-height:1.7}
.arlt-section{--container-max-width:1240px}

/* --- Zierlinie statt Divider (Stil C kennt keine Shape-Divider) -------- */
.arlt-ornament{width:100%;line-height:0;text-align:center;color:#7E5C33}
.arlt-ornament p{display:flex;align-items:center;justify-content:center;gap:14px;margin:0}
.arlt-ornament p:before,.arlt-ornament p:after{
  content:'';height:1px;flex:1 1 auto;max-width:210px;
  background:linear-gradient(90deg,rgba(186,155,119,0),#BA9B77);
}
.arlt-ornament p:after{background:linear-gradient(90deg,#BA9B77,rgba(186,155,119,0))}

/* --- Vollbild-Hero ----------------------------------------------------- */
.arlt-hero-c{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:82vh;
  --padding-top:150px;--padding-bottom:96px;
  --justify-content:flex-end;
  background-color:#30271F;
}
.arlt-hero-c:before{display:none}
.arlt-hero-c:after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(96deg,rgba(24,19,14,.88) 0%,rgba(24,19,14,.74) 28%,rgba(24,19,14,.46) 52%,rgba(24,19,14,.10) 76%,rgba(24,19,14,.22) 100%),
    linear-gradient(0deg,rgba(24,19,14,.42) 0%,rgba(24,19,14,0) 36%);
}
.arlt-hero-c>.e-con-inner{position:static;z-index:auto}
.arlt-hero-c-copy{position:relative;z-index:2}
.arlt-hero-c-bg{
  position:absolute!important;inset:0;z-index:0;
  width:100%!important;max-width:none!important;height:100%;line-height:0;margin:0!important;
}
.arlt-hero-c-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  outline:0!important;box-shadow:none!important;border-radius:0;
  transform-origin:58% 50%;
  filter:brightness(1.12) saturate(1.04);
  animation:arltKen 30s ease-in-out infinite alternate;
}
@keyframes arltKen{from{transform:scale(1.02)}to{transform:scale(1.10)}}

.arlt-hero-c-copy{max-width:790px;--gap:26px}
.arlt-hero-c h1.elementor-heading-title{
  color:#FAF7F1;font-size:86px;line-height:1.02;letter-spacing:-.036em;
  text-shadow:0 2px 26px rgba(24,19,14,.45);
}
.arlt-hero-c h1 em{color:#E3CFB0}
.arlt-hero-c .arlt-eyebrow p{color:#E3CFB0}
.arlt-hero-c .arlt-eyebrow p:before{background:linear-gradient(90deg,#BA9B77,rgba(186,155,119,.15))}
.arlt-hero-c .arlt-lead,.arlt-hero-c .elementor-widget-text-editor{color:rgba(250,247,241,.92)}
.arlt-hero-c .arlt-hero-note{color:rgba(250,247,241,.66)}
.arlt-hero-c .arlt-text-button .elementor-button{color:#FAF7F1;border-bottom-color:#E3CFB0}
.arlt-hero-c .arlt-text-button .elementor-button:hover{border-bottom-color:#FAF7F1}

/* Siegel im Hero */
.arlt-hero-c-seal{
  position:absolute!important;right:38px;bottom:38px;z-index:3;
  width:212px!important;max-width:none!important;
  padding:22px 18px!important;text-align:center;
  background:linear-gradient(160deg,rgba(250,247,241,.96),rgba(239,230,218,.92));
  border:1px solid #BA9B77;
  box-shadow:0 18px 44px rgba(16,12,8,.5);
  transform:rotate(-2deg);
}
.arlt-hero-c-seal p{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#51483F;margin:0}
.arlt-hero-c-seal strong{
  display:block;font-family:'Arlt Display',Georgia,serif;font-size:34px;font-weight:500;
  letter-spacing:-.02em;color:#622D0C;margin-bottom:4px;text-transform:none;
}

/* --- Editorial-Ueberlappung im Geschichtsabschnitt --------------------- */
.arlt-overlap .arlt-photo img{height:600px}
.arlt-overlap-copy{
  background:linear-gradient(180deg,#FFFFFF,#FDFAF5);
  border:1px solid #D8C8B5;
  padding:52px 46px!important;
  margin-left:-96px!important;
  box-shadow:0 30px 60px -34px rgba(48,39,31,.45);
  position:relative;z-index:2;
}
.arlt-overlap-copy h2.elementor-heading-title{font-size:46px}

/* --- Zahlenband (I · II · III) ---------------------------------------- */
.arlt-numeral .elementor-heading-title{
  font-family:'Arlt Display',Georgia,serif;font-size:44px;color:#7E5C33;line-height:1;
  letter-spacing:.02em;
}

/* --- Tablet ------------------------------------------------------------ */
@media(max-width:1024px){
  :root{--arlt-h1:60px;--arlt-h2:44px}
  .arlt-hero-c{min-height:auto;--padding-top:118px;--padding-bottom:72px}
  .arlt-hero-c h1.elementor-heading-title{font-size:60px}
  h3.elementor-heading-title{font-size:29px}
  body{font-size:17px}
  .arlt-hero-c-seal{right:26px;bottom:26px;width:178px!important;padding:18px 14px!important}
  .arlt-hero-c-seal strong{font-size:29px}
  /* Auf Tablet/Handy stapeln sich Foto und Textkarte. Ohne Versatz sitzt die
     Karte exakt auf der Bildkante – das wirkt wie ein Fehler. Ein bewusster
     Ueberlapp von 34 px greift die Gestaltung der Schreibtischfassung auf. */
  .arlt-overlap-copy{margin-left:0!important;margin-top:-34px!important;padding:38px 30px!important}
  .arlt-overlap-copy h2.elementor-heading-title{font-size:44px}
  .arlt-overlap .arlt-photo img{height:420px}
  .arlt-ornament p:before,.arlt-ornament p:after{max-width:130px}
}

/* --- Smartphone -------------------------------------------------------- */
@media(max-width:767px){
  :root{--arlt-h1:44px;--arlt-h2:34px}
  .arlt-hero-c{--padding-top:92px;--padding-bottom:150px}
  .arlt-hero-c h1.elementor-heading-title{font-size:44px;line-height:1.06}
  h3.elementor-heading-title{font-size:27px}
  body{font-size:16px}
  .arlt-hero-c-bg img{object-position:center 55%}
  .arlt-hero-c-seal{
    right:20px;left:20px;bottom:20px;width:auto!important;
    transform:none;display:flex;align-items:center;justify-content:center;gap:12px;
    padding:14px 16px!important;
  }
  .arlt-hero-c-seal strong{display:inline;font-size:26px;margin:0 12px 0 0}
  .arlt-hero-c-seal p{display:inline;font-size:9px}
  .arlt-overlap-copy{padding:26px 20px!important}
  .arlt-overlap-copy h2.elementor-heading-title{font-size:34px}
  .arlt-overlap .arlt-photo img{height:320px}
  .arlt-ornament p:before,.arlt-ornament p:after{max-width:70px}
  .arlt-numeral .elementor-heading-title{font-size:32px}
}

/* --- Bewegung aus, wenn der Nutzer das wuenscht ------------------------ */
@media(prefers-reduced-motion:reduce){
  .arlt-hero-c-bg img{animation:none}
}

/* =========================================================================
   Rueckmeldung 08.09.2026 – runde Formen, groessere Abstaende, Kopfbereich
   Alle Werte kommen aus part0-style.php.
   ========================================================================= */

/* --- 1. Runde Formen durchgehend ---------------------------------------- */
.arlt-photo img,
.arlt-card-photo img,
.arlt-story-photo img,
.arlt-catalog-photo img{border-radius:18px}
.arlt-card{border-radius:22px}
.arlt-card>.arlt-card-photo{border-radius:22px 22px 0 0;overflow:hidden}
.arlt-card>.arlt-card-photo img{border-radius:0}
.arlt-hero-c{border-radius:0 0 34px 34px}
.arlt-hero-c-seal{border-radius:22px}
.arlt-overlap-copy{border-radius:22px}
.arlt-trust{border-radius:22px;margin:0 auto}
.arlt-sand{border-radius:34px}
.arlt-cta{border-radius:34px}
.arlt-form-card{border-radius:22px;overflow:hidden}
.arlt-location-card{border-radius:22px}
.arlt-branch-detail{border-radius:22px}
.arlt-map{border-radius:22px 22px 0 0}
.arlt-map-consent{border-radius:0 0 22px 22px}
.arlt-location-search{border-radius:999px}
.arlt-menu-panel{border-radius:22px}
.arlt-contact-form input,
.arlt-contact-form select,
.arlt-contact-form textarea{border-radius:16px!important}
.arlt-faq{border-radius:0}

/* Schaltflaechen in Pillenform */
.arlt-button:not(.arlt-text-button) .elementor-button,
.arlt-contact-form button,
.arlt-map-load,
.arlt-map-reset{border-radius:999px!important;padding-left:30px;padding-right:30px}
/* Die Filialkarten tragen jetzt h2 statt h3 (Gliederung ohne Ebenensprung).
   Aussehen bleibt wie zuvor – arlt.css gestaltet nur .arlt-location-card h3. */
.arlt-location-card h2{
  font-family:'Arlt Display',Georgia,serif;font-weight:500;
  font-size:25px;line-height:1.15;margin:0 0 8px;color:#30271F;letter-spacing:-.01em;
}
.arlt-text-button .elementor-button{border-radius:0}

/* Der Torten-Bogen bleibt bewusst ein Bogen, wird unten aber ebenfalls rund */
.arlt-torte-photo img{border-radius:50% 50% 18px 18px}
.arlt-home-hero .arlt-hero-visual img{border-radius:48% 48% 18px 18px}

/* --- 2. Kopf- und Fussbereich abrunden ---------------------------------- */
/* Kein overflow:hidden – sonst schneidet der Kopfbereich das Aufklappmenue ab. */
.elementor-location-header{border-radius:0 0 34px 34px}
.arlt-header{border-radius:0 0 34px 34px}
.arlt-footer{border-radius:34px 34px 0 0}
.arlt-header-cta .elementor-button{border-radius:999px!important;padding:14px 26px}

/* --- 3. Mehr Luft zwischen Bild und Text -------------------------------- */
.arlt-section{--gap:34px}
.arlt-section>.e-con-inner{gap:34px}
.arlt-row{--gap:64px}
.arlt-col{--gap:26px}
.arlt-card{--gap:20px}
.arlt-card .elementor-widget-text-editor{margin-top:2px}
.arlt-card h3,
.arlt-card .arlt-card-title{margin-top:6px}
.arlt-section-heading{margin-bottom:34px;padding-bottom:26px}
/* Raster: Spaltenbreite an den groesseren Abstand anpassen, sonst bricht die
   vierte Karte um (arlt.css rechnet mit 26 px Abstand). */
/* Abstand fest setzen und die Spaltenbreite daraus ableiten – so kann kein
   abweichender Wert aus arlt.css oder aus Elementor einen Umbruch ausloesen. */
.arlt-grid-four,.arlt-grid-three{--gap:34px;gap:34px!important}
.arlt-grid-four>.arlt-col{width:calc(25% - 26px)!important;flex:0 0 auto}
.arlt-grid-three>.arlt-col{width:calc(33.333% - 23px)!important;flex:0 0 auto}

/* --- Galerien: immer ein leichter Abstand zwischen den Bildern ----------
   Elementor steuert den Abstand ueber --row-gap/--column-gap, nicht ueber
   --gap. Der Wert aus arlt.css blieb deshalb wirkungslos und die
   Katalogbilder stiessen ohne Zwischenraum aneinander. Abstand hier fest
   setzen und die Spaltenbreite exakt daraus ableiten (4 x (25% - 21px)
   + 3 x 28px = 100%), damit keine Karte umbricht. */
.arlt-catalog-grid{--gap:28px;gap:28px!important}
.arlt-catalog-card{width:calc(25% - 21px)!important;flex:0 0 auto}
/* Grundregel fuer alle weiteren Galerien: auch WordPress- und
   Elementor-Galerien erhalten denselben ruhigen Zwischenraum. */
.elementor-widget-image-gallery .gallery{margin:-14px!important}
.elementor-widget-image-gallery .gallery-item{margin:0!important;padding:14px!important}
.elementor-widget-image-gallery .gallery-item img{border:0!important}
.elementor-widget-gallery .elementor-gallery__container{--grid-column-gap:28px;--grid-row-gap:28px}
.arlt-lead{margin-top:4px}
.arlt-actions{--gap:32px;margin-top:10px}
.arlt-links .elementor-icon-list-item{margin-bottom:4px}
.arlt-eyebrow{margin-bottom:6px}
.arlt-footer-grid{--gap:80px}
.arlt-footer .arlt-col{--gap:20px}
.arlt-footer p{line-height:1.85}
/* Am Schreibtisch duerfen die Verweise enger stehen; ab Tablet bleiben die
   44 px Zielflaeche fuer den Finger erhalten (siehe Abschnitt Tablet).
   Die 44 px stehen in arlt.css und werden hier nur fuer die Fusszeile gesenkt. */
.arlt-footer .arlt-links .elementor-icon-list-item{min-height:30px!important;margin-bottom:4px!important}
.arlt-footer .arlt-links .elementor-icon-list-item a{min-height:30px!important}
.arlt-footer .arlt-col{--gap:16px}
.arlt-footer h3{margin-bottom:4px}

/* --- 4. Kopfbereich: Logo links, Wortmarke rechts ----------------------- */
.arlt-brand{
  width:auto!important;flex-shrink:0;
  --flex-direction:row;--align-items:center;--gap:18px;
  flex-direction:row!important;align-items:center!important;gap:18px;
}
.arlt-logo-mark{
  width:auto!important;height:auto!important;overflow:visible!important;
  position:static!important;flex:0 0 auto;line-height:0;
}
.arlt-logo-mark img{
  position:static!important;left:auto!important;top:auto!important;
  width:auto!important;max-width:none!important;height:76px!important;
  border-radius:0!important;box-shadow:none!important;outline:0!important;
}
.arlt-brand-type{
  width:auto!important;flex:0 0 auto;
  --flex-direction:column;--gap:2px;flex-direction:column!important;gap:2px;
  align-items:flex-start!important;
}
.arlt-wordmark .elementor-heading-title{font-size:40px;letter-spacing:-.02em;line-height:1}
.arlt-brand-sub{font-size:10px;letter-spacing:.2em;white-space:nowrap}

/* --- 5. Menue: groessere Schrift, mehr Luft ----------------------------- */
.arlt-menu .e-n-menu-title-text{font-size:16.5px!important;letter-spacing:.005em}
.arlt-menu{--n-menu-title-font-size:16.5px;--n-menu-title-space-between:6px}
.arlt-menu .e-n-menu-heading{gap:22px}
.arlt-menu .e-n-menu-title{min-height:48px;padding:8px 6px}
/* Die Menuepunkte fuellen die gesamte Hoehe der Kopfzeile, damit auch
   ueber und unter der Beschriftung geklickt werden kann. */
/* WICHTIG: nur am Schreibtisch. Ab Tablet ist .e-n-menu-wrapper der
   Aufklappbereich des Handy-Menues – mit height:100% wurde er auf die Hoehe
   der Kopfzeile (50 px) zusammengedrueckt und war wegen overflow:hidden leer. */
@media(min-width:1025px){
  .arlt-menu{align-self:stretch}
  .arlt-menu>.elementor-widget-container,
  .arlt-menu .e-n-menu,
  .arlt-menu .e-n-menu-wrapper{height:100%}
  .arlt-menu .e-n-menu-item,
  .arlt-menu .e-n-menu-heading,
  .arlt-menu .e-n-menu-title{height:100%}
  .arlt-menu .e-n-menu-title{display:flex;align-items:center;justify-content:center}
}
.arlt-menu-panel{padding:42px 38px!important}
/* Der Abstand im Aufklappmenue kam nicht an (gemessen: 0 px). Deshalb wird er
   hier fest gesetzt und die Spaltenbreite daraus abgeleitet. */
.arlt-menu-grid{--gap:40px;gap:40px!important}
.arlt-menu-grid>.arlt-col{width:calc(25% - 31px)!important;flex:0 0 auto}
.arlt-menu-grid .arlt-card{--arlt-card-pad:20px;--padding-bottom:22px;--arlt-card-bottom:22px;--gap:12px}
.arlt-menu-grid .arlt-card-photo img{height:170px}
.arlt-menu-grid .arlt-card-title .elementor-heading-title{font-size:23px}
.arlt-menu-grid p{font-size:14px;line-height:1.6}
.arlt-menu-grid .arlt-entdecken p{font-size:12.5px}

/* --- 6. Ganze Karte anklickbar: EIN echter Verweis ---------------------- */
/* Frueher lag ein CSS-Hilfselement (:after der Schaltflaeche) ueber der Karte.
   Es machte die Flaeche zwar klickbar, der Mauszeiger sprang beim Ueberfahren
   aber zwischen Hand und Textmarke. Jetzt liegt ein echter, unsichtbarer
   Verweis (Klasse arlt-cardlink) ueber der Karte - ein Element, ein Ziel,
   ein Zeiger. Der sichtbare Hinweis "Entdecken" ist nur noch Text. */
.arlt-card{position:relative}
.arlt-card,
.arlt-card *{cursor:pointer}
/* Kein Textmarken-Zeiger und keine versehentliche Textauswahl auf der Karte. */
.arlt-card{-webkit-user-select:none;user-select:none}

.arlt-cardlink{
  position:absolute!important;top:0;right:0;bottom:0;left:0;
  /* Elementor gibt jedem Baustein width:100%. Damit wuerde die Angabe
     right ignoriert und die Flaeche bliebe schmaler als die Karte. */
  width:auto!important;height:auto!important;max-width:none!important;
  margin:0!important;padding:0!important;z-index:5;
}
.arlt-cardlink>.elementor-widget-container,
.arlt-cardlink .elementor-button-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}
.arlt-cardlink .elementor-button{
  position:absolute;top:0;right:0;bottom:0;left:0;
  display:block;padding:0;border:0;background:none!important;box-shadow:none!important;
  border-radius:inherit;font-size:0;line-height:0;
}
/* Beschriftung bleibt fuer Vorlesewerkzeuge lesbar, ist aber unsichtbar. */
.arlt-cardlink .elementor-button-content-wrapper,
.arlt-cardlink .elementor-button-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.arlt-cardlink .elementor-button:hover,
.arlt-cardlink .elementor-button:focus{background:none!important}
.arlt-card:focus-within{outline:3px solid #622D0C;outline-offset:4px}
.arlt-cardlink .elementor-button:focus-visible{outline:0}

/* Sichtbarer Hinweis, optisch wie die fruehere Textschaltflaeche. */
.arlt-entdecken{margin-top:2px}
.arlt-entdecken p{
  display:inline-block;margin:0;padding:12px 0;
  font-family:'Arlt Text',system-ui,sans-serif;
  font-size:12.5px;font-weight:600;line-height:1.4;
  letter-spacing:.055em;text-transform:uppercase;color:#622D0C;
  border-bottom:1.7px solid #BA9B77;
  transition:color .2s ease,border-color .2s ease;
}
.arlt-card:hover .arlt-entdecken p{color:#4E2308;border-bottom-color:#622D0C}

/* arlt.css beschneidet Karten; fuer die Menuekarten wird das aufgehoben,
   damit die Verweisflaeche bis in die Mitte der Luecke reichen kann. Das Foto
   beschneidet sich weiterhin selbst und behaelt seine runden Ecken. */
.arlt-menu-grid .arlt-card{overflow:visible!important}
.arlt-menu-grid .arlt-cardlink{left:-21px;right:-21px}
.arlt-menu-grid .arlt-entdecken p{padding:10px 0}

/* --- 6b. Abstand zwischen Bild und Text in den Unterseiten -------------- */
/* Die zweispaltigen Reihen der Unterseiten standen auf gap:0. Bild und Text
   beruehrten sich, der freie Platz sammelte sich rechts am Rand. Die Werte
   entsprechen genau dem freien Platz der jeweiligen Reihe, dadurch bricht
   keine Spalte um: hero-row 632+533 (74 frei), story-row 580+580 (80 frei),
   Handlungsband 598+300 (342 frei). */
.arlt-row.arlt-hero-row{--gap:72px;gap:72px!important}
.arlt-row.arlt-story-row{--gap:80px;gap:80px!important}
.arlt-cta .arlt-row:not(.arlt-cta-row){--gap:80px;gap:80px!important}
/* Beim Umbruch auf eine Spalte wirkt derselbe Wert senkrecht – Bild und Text
   bekommen dort ebenfalls Luft. */
@media(max-width:1024px){
  .arlt-row.arlt-hero-row,
  .arlt-row.arlt-story-row,
  .arlt-cta .arlt-row:not(.arlt-cta-row){--gap:44px;gap:44px!important}
}
@media(max-width:767px){
  .arlt-row.arlt-hero-row,
  .arlt-row.arlt-story-row,
  .arlt-cta .arlt-row:not(.arlt-cta-row){--gap:30px;gap:30px!important}
}

/* --- 7. Handlungsband: Schaltflaeche und Telefonnummer trennen ---------- */
.arlt-cta-actions{--gap:34px;width:300px}
.arlt-cta-actions .elementor-widget:not(:first-child){margin-top:14px!important}
.arlt-cta-row{--gap:80px}

/* --- 8. Bewertungen und Zutaten ---------------------------------------- */
.arlt-rating-box{
  background:linear-gradient(180deg,#FFFFFF,#FDFAF5);
  border:1px solid #D8C8B5;border-radius:22px;
  padding:34px 30px!important;text-align:center;
  box-shadow:0 16px 38px -22px rgba(48,39,31,.4);
}
.arlt-rating-score .elementor-heading-title{
  font-family:'Arlt Display',Georgia,serif;font-weight:500;
  font-size:70px;line-height:1;color:#622D0C;letter-spacing:-.04em;
}
.arlt-rating-stars p{font-size:24px;letter-spacing:.16em;color:#7E5C33;margin:0}
.arlt-rating-note p{font-size:13px;line-height:1.6;color:#51483F}
.arlt-quote{
  background:linear-gradient(180deg,#FFFFFF,#FDFAF5);
  border:1px solid #D8C8B5;border-radius:22px;
  padding:30px 28px!important;--gap:14px;
  box-shadow:0 12px 30px -22px rgba(48,39,31,.4);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.arlt-quote:hover{border-color:#BA9B77;box-shadow:0 18px 40px -22px rgba(48,39,31,.5)}
.arlt-quote .arlt-quote-stars p{font-size:16px;letter-spacing:.14em;color:#7E5C33;margin:0}
.arlt-quote .arlt-quote-text p{font-size:16px;line-height:1.75;font-style:italic}
.arlt-quote .arlt-quote-name p{font-size:13px;font-weight:600;color:#30271F;letter-spacing:.04em}
.arlt-zutaten .arlt-col{
  background:#FAF7F1;border:1px solid rgba(186,155,119,.34);
  border-radius:22px;padding:30px 26px!important;--gap:12px;
}
.arlt-zutaten .arlt-numeral .elementor-heading-title{font-size:38px;margin-bottom:2px}
.arlt-zutaten h3{font-size:24px}
.arlt-zutaten p{font-size:15px;line-height:1.7}

/* --- Eigene Zeichen fuer Telefon und E-Mail ----------------------------- */
/* Zwei selbst gezeichnete Strichzeichen im Stil der Seite: das Telefon mit
   zwei Dampfschwaden (wie ueber frischem Brot) statt der ueblichen
   Funkwellen, der Umschlag mit einem weichen Ofenbogen statt der harten
   Falzspitze. Beide liegen als Inline-SVG in der CSS-Datei – kein
   zusaetzlicher Request, keine Icon-Schrift, faerbt sich ueber currentColor
   automatisch mit der Textfarbe. */
:root{
  --arlt-ico-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.1 4.1h2.2c.54 0 1 .4 1.09.93l.48 2.9c.08.47-.16.94-.59 1.16l-1.45.73c1.03 2.15 2.78 3.9 4.93 4.93l.73-1.45c.22-.43.69-.67 1.16-.59l2.9.48c.53.09.93.55.93 1.09v2.2c0 .66-.54 1.2-1.2 1.19-6.86-.2-11.9-5.24-12.1-12.1-.02-.66.53-1.2 1.19-1.2z'/%3E%3Cpath d='M16.8 7.6c-1.15-1.15-.35-2.1.5-2.75'/%3E%3Cpath d='M19.9 6.5c-1.15-1.15-.35-2.1.5-2.75'/%3E%3C/svg%3E");
  --arlt-ico-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.4' width='18.8' height='13.2' rx='2.8'/%3E%3Cpath d='M3.6 7.4C6.6 12.9 9.4 14.4 12 14.4s5.4-1.5 8.4-7'/%3E%3C/svg%3E");
}
a[href^="tel:"]:not(:has(.elementor-icon-list-icon)):before,
a[href^="mailto:"]:not(:has(.elementor-icon-list-icon)):before{
  content:'';display:inline-block;flex:0 0 auto;
  width:1.12em;height:1.12em;margin-right:.52em;
  vertical-align:-.19em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  opacity:.92;
}
a[href^="tel:"]:not(:has(.elementor-icon-list-icon)):before{
  -webkit-mask-image:var(--arlt-ico-tel);mask-image:var(--arlt-ico-tel);
}
a[href^="mailto:"]:not(:has(.elementor-icon-list-icon)):before{
  -webkit-mask-image:var(--arlt-ico-mail);mask-image:var(--arlt-ico-mail);
}
/* In Schaltflaechen: Elementor legt den Beschriftungstext in einen eigenen
   Flex-Kasten. Damit das Zeichen daneben und nicht darueber steht, wird die
   Schaltflaeche selbst zur Flex-Zeile. */
.elementor-button[href^="tel:"],
.elementor-button[href^="mailto:"]{
  display:inline-flex!important;align-items:center;justify-content:center;
}
.elementor-button[href^="tel:"]:before,
.elementor-button[href^="mailto:"]:before{
  width:1.05em;height:1.05em;margin-right:.62em;vertical-align:0;opacity:1;
}
/* In der Fusszeile und in Listen sitzt das Zeichen mittig zur Zeile. */
.arlt-links a[href^="tel:"],
.arlt-links a[href^="mailto:"]{display:flex;align-items:center}
.arlt-links a[href^="tel:"]:before,
.arlt-links a[href^="mailto:"]:before{vertical-align:0}
/* Der Verweis selbst traegt in Listen die Grundfarbe Braun, waehrend der
   Text darin hell ist. currentColor waere dort unsichtbar – deshalb steht
   die Farbe fuer Listenzeichen ausdruecklich hier. */
.arlt-links a[href^="tel:"]:before,
.arlt-links a[href^="mailto:"]:before{background-color:#7E5C33}
.arlt-footer .arlt-links a[href^="tel:"]:before,
.arlt-footer .arlt-links a[href^="mailto:"]:before,
.arlt-cta a[href^="tel:"]:not(.elementor-button):before,
.arlt-cta a[href^="mailto:"]:not(.elementor-button):before,
.arlt-hero-c a[href^="tel:"]:not(.elementor-button):before,
.arlt-hero-c a[href^="mailto:"]:not(.elementor-button):before{background-color:#BA9B77}
.arlt-footer .arlt-links a:hover[href^="tel:"]:before,
.arlt-footer .arlt-links a:hover[href^="mailto:"]:before{background-color:#FAF7F1}

/* --- 9. Tablet ---------------------------------------------------------- */
@media(max-width:1024px){
  .arlt-section{--gap:26px}
  .arlt-row{--gap:40px}
  .arlt-logo-mark img{height:62px!important}
  .arlt-wordmark .elementor-heading-title{font-size:34px}
  .arlt-menu .e-n-menu-title-text{font-size:18px!important}
  .arlt-menu .e-n-menu-heading{gap:8px}
  .arlt-menu-panel{
    padding:4px 0 14px!important;background:none!important;
    border:0!important;box-shadow:none!important;border-radius:0!important;
  }
  /* ---------- Menue ab Tablet: Umschalter und Aufklappbereich ---------- */
  /* Umschalter: runde Marken-Schaltflaeche mit hellem Zeichen. Elementor
     faerbt das SVG mit einem eigenen fill – deshalb currentColor erzwingen. */
  .arlt-menu .e-n-menu-toggle{
    width:46px!important;height:46px!important;border-radius:999px!important;
    background:linear-gradient(180deg,var(--arlt-primary-light) 0%,var(--arlt-primary) 58%,var(--arlt-primary-deep) 100%)!important;
    border:1px solid var(--arlt-primary-deep)!important;
    box-shadow:0 10px 22px -12px rgba(78,35,8,.75),inset 0 1px 0 rgba(255,255,255,.16);
    color:#FAF7F1!important;
    display:flex;align-items:center;justify-content:center;
    transition:filter .2s ease;
  }
  .arlt-menu .e-n-menu-toggle svg,
  .arlt-menu .e-n-menu-toggle svg *{fill:currentColor!important;stroke:none!important}
  .arlt-menu .e-n-menu-toggle svg{width:21px!important;height:21px!important}
  .arlt-menu .e-n-menu-toggle:hover{filter:brightness(1.08)}
  .arlt-menu .e-n-menu-toggle:focus-visible{outline:3px solid #BA9B77;outline-offset:3px}

  /* Aufklappbereich: volle Breite unter der Kopfzeile, eigene Hoehe,
     scrollbar, damit auch die Bildkarten Platz haben. */
  /* Der Aufklappbereich haengt an .arlt-menu und waere damit nur so breit wie
     der Umschalter. Bezugspunkt wird .arlt-header (position:relative), dann
     spannt top/left/right ihn ueber die ganze Kopfzeilenbreite. */
  .arlt-header .e-n-menu,
  .arlt-header .arlt-menu{position:static}
  .arlt-menu .e-n-menu-wrapper{
    position:absolute!important;top:calc(100% + 8px)!important;
    height:auto!important;max-height:calc(100vh - 96px)!important;
    overflow-y:auto!important;overscroll-behavior:contain;
    left:0!important;right:0!important;width:auto!important;max-width:none!important;
    margin:0!important;
    background:linear-gradient(180deg,#FFFDF9,#FAF7F1)!important;
    border:1px solid #D8C8B5;
    border-radius:22px;
    box-shadow:0 26px 50px -22px rgba(48,39,31,.55);
    padding:8px 20px 20px!important;
  }
  .arlt-menu .e-n-menu-heading{
    flex-direction:column!important;align-items:stretch!important;
    width:100%!important;max-width:100%!important;gap:0!important;
    margin-left:0!important;margin-right:0!important;
  }
  .arlt-menu .e-n-menu-item{
    width:100%!important;max-width:100%!important;
    left:auto!important;right:auto!important;
    margin-left:0!important;margin-right:0!important;
    border-bottom:1px solid rgba(216,200,181,.75);
  }
  .arlt-menu .e-n-menu-item:last-child{border-bottom:0}
  .arlt-menu .e-n-menu-title{
    min-height:58px!important;padding:12px 2px!important;
    display:flex!important;align-items:center!important;
    justify-content:space-between!important;gap:12px;
    text-align:left;width:100%!important;
  }
  .arlt-menu .e-n-menu-title>*:first-child{flex:1 1 auto;text-align:left}
  /* Schrift wie im Schreibtisch-Menue lassen; nur Platz schaffen, damit der
     Pfeil ganz rechts sitzt. */
  .arlt-menu .e-n-menu-title-text{margin-right:auto;text-align:left}
  /* Pfeil des Aufklapppunktes in Markenfarbe und gut sichtbar */
  .arlt-menu .e-n-menu-title .e-n-menu-dropdown-icon,
  .arlt-menu .e-n-menu-title .e-n-menu-dropdown-icon svg,
  .arlt-menu .e-n-menu-title .e-n-menu-dropdown-icon svg *{
    fill:#622D0C!important;color:#622D0C!important;
  }
  .arlt-menu .e-n-menu-title .e-n-menu-dropdown-icon{
    width:40px;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border-radius:999px;background:rgba(186,155,119,.16);
  }
  /* Inhalt eines aufgeklappten Punktes: keine zweite Flaeche, kein Rahmen. */
  .arlt-menu .e-n-menu-content{
    width:100%!important;max-width:100%!important;
    left:auto!important;right:auto!important;
    margin-left:0!important;margin-right:0!important;
    background:transparent!important;box-shadow:none!important;border:0!important;
  }
  .arlt-menu-grid{--gap:26px;gap:26px!important}
  .arlt-menu-grid .arlt-cardlink{left:-14px;right:-14px}
  .arlt-menu-grid>.arlt-col{width:calc(50% - 14px)!important}
  .arlt-grid-four,.arlt-grid-three{--gap:24px;gap:24px!important}
  .arlt-grid-four>.arlt-col{width:calc(50% - 13px)!important}
  /* Galerie: zwei Spalten, Abstand und Breite bleiben aufeinander abgestimmt */
  .arlt-catalog-grid{--gap:24px;gap:24px!important}
  .arlt-catalog-card{width:calc(50% - 12px)!important}
  .elementor-widget-image-gallery .gallery{margin:-12px!important}
  .elementor-widget-image-gallery .gallery-item{padding:12px!important}
  .elementor-widget-gallery .elementor-gallery__container{--grid-column-gap:24px;--grid-row-gap:24px}
  .arlt-grid-three>.arlt-col{width:calc(50% - 13px)!important}
  .arlt-grid-three>.arlt-col:last-child:nth-child(3){width:100%!important}
  .arlt-hero-c{border-radius:0 0 22px 22px}
  .elementor-location-header,.arlt-header{border-radius:0 0 22px 22px}
  .arlt-footer{border-radius:22px 22px 0 0}
  /* Ab Tablet wieder volle Fingerflaeche (Zugaenglichkeit, 44 px). */
  .arlt-footer .arlt-links .elementor-icon-list-item,
  .arlt-footer .arlt-links .elementor-icon-list-item a{min-height:44px!important}
  .arlt-footer .arlt-links .elementor-icon-list-item{margin-bottom:2px!important}
  .arlt-cta-actions{width:100%;--gap:22px}
  .arlt-rating-score .elementor-heading-title{font-size:58px}
}

/* --- 10. Smartphone ----------------------------------------------------- */
@media(max-width:767px){
  .arlt-section{--gap:22px}
  .arlt-row{--gap:30px}
  .arlt-brand{gap:12px;--gap:12px}
  .arlt-logo-mark img{height:50px!important}
  .arlt-wordmark .elementor-heading-title{font-size:27px}
  .arlt-brand-sub{font-size:8px;letter-spacing:.16em}
  .arlt-menu .e-n-menu-title-text{font-size:18px!important}
  .arlt-menu .e-n-menu-title{min-height:52px}
  /* Am Handy stehen die Bildkarten des Mega-Menues untereinander und quer:
     Bild links, Text rechts. So bleibt die Liste kurz und gut treffbar. */
  .arlt-menu-grid{--gap:12px;gap:12px!important;flex-direction:column!important}
  .arlt-menu-grid>.arlt-col{width:100%!important}
  /* Zwei Spalten: links das Bild ueber beide Zeilen, rechts Titel und
     Unterzeile untereinander. Ohne zusaetzliche Bausteine, rein ueber Raster. */
  .arlt-menu-grid .arlt-card{
    display:grid!important;
    grid-template-columns:104px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;column-gap:14px;row-gap:2px;
    padding:0 16px 0 0!important;overflow:hidden!important;
  }
  .arlt-menu-grid .arlt-cardlink{left:0;right:0}
  .arlt-menu-grid .arlt-card{min-height:112px}
  .arlt-menu-grid .arlt-card>.arlt-card-photo{
    grid-column:1;grid-row:1 / span 2;
    margin:0!important;width:104px!important;min-width:104px;max-width:104px!important;
    border-radius:22px 0 0 22px;align-self:stretch;
    display:flex;
  }
  /* Feste Bildhoehe: sonst bestimmt das Seitenverhaeltnis des Motivs die
     Kartenhoehe und hochformatige Bilder machen die Karte doppelt so hoch. */
  .arlt-menu-grid .arlt-card-photo img{
    height:112px!important;width:104px!important;object-fit:cover;display:block;
  }
  .arlt-menu-grid .arlt-card-title{
    grid-column:2;grid-row:1;align-self:end;
    padding:12px 0 0!important;margin:0!important;
  }
  .arlt-menu-grid .arlt-card-title:after{display:none}
  .arlt-menu-grid .arlt-card-title .elementor-heading-title{
    font-size:17px!important;line-height:1.25;overflow-wrap:normal;hyphens:manual;
  }
  .arlt-menu-grid .arlt-card>.elementor-widget-text-editor{
    grid-column:2;grid-row:2;align-self:start;margin:0!important;padding:0 0 12px!important;
  }
  .arlt-menu-grid p{font-size:13px;line-height:1.45}
  .arlt-menu-grid .arlt-entdecken{display:none!important}
  /* Schmale Karten im Aufklappmenue: Ueberschriften muessen umbrechen duerfen */
  .arlt-menu-grid .arlt-card{--arlt-card-pad:16px;--padding-bottom:18px;--arlt-card-bottom:18px;--gap:9px}
  .arlt-menu-grid .arlt-card-title .elementor-heading-title{font-size:16px;line-height:1.25;overflow-wrap:anywhere;hyphens:auto}
  .arlt-menu-grid .arlt-card-title{padding-bottom:9px}
  .arlt-menu-grid .arlt-card-title:after{width:26px}
  .arlt-menu-grid p{font-size:12px;line-height:1.55}
  .arlt-menu-grid .arlt-card-photo img{height:96px}
  .arlt-menu-grid .arlt-entdecken p{font-size:11px;letter-spacing:.04em}
  .arlt-grid-four,.arlt-grid-three{--gap:18px;gap:18px!important}
  .arlt-grid-four>.arlt-col,.arlt-grid-three>.arlt-col{width:100%!important}
  /* Galerie bleibt am Telefon zweispaltig, nur mit kleinerem Abstand */
  .arlt-catalog-grid{--gap:14px;gap:14px!important}
  .arlt-catalog-card{width:calc(50% - 7px)!important}
  .elementor-widget-image-gallery .gallery{margin:-7px!important}
  .elementor-widget-image-gallery .gallery-item{padding:7px!important}
  .elementor-widget-gallery .elementor-gallery__container{--grid-column-gap:14px;--grid-row-gap:14px}
  .arlt-menu-grid .arlt-card-photo img{height:120px}
  .arlt-section-heading{margin-bottom:24px;padding-bottom:20px}
  .arlt-rating-box{padding:26px 20px!important}
  .arlt-rating-score .elementor-heading-title{font-size:52px}
  .arlt-quote{padding:22px 18px!important}
  .arlt-zutaten .arlt-col{padding:22px 18px!important}
  .arlt-button:not(.arlt-text-button) .elementor-button{padding-left:22px;padding-right:22px}
}