/* =========================================================
   CAMPUS-EW FOOTER — Fassung Navy, nativ gebaut
   ---------------------------------------------------------
   Gegenstück zu megamenu.css: die Struktur kommt aus Divi-
   Modulen, hier liegt nur die Gestaltung. Jeder Selektor ist
   gegen die tatsächliche Divi-5-Ausgabe geschrieben, wie sie
   euer Header erzeugt:

     Link-Modul   <a class="et_pb_link … cewf-lnk">
                    <span class="et_pb_link_inner">
                      <span class="et_pb_link_text"><p>Text</p>
     Text-Modul   <div class="et_pb_text … cewf-ttl">
                    <div class="et_pb_text_inner"><p>Text</p>
     Gruppe       <div class="et_pb_group et_flex_group … cewf-nav">
     Bild         <div class="et_pb_image … cewf-logo">
                    <a><span class="et_pb_image_wrap"><img>

   Klassenpräfix cewf-. Das Präfix cew- gehört Header und
   Mega-Menü; eine Doppelbelegung von .cew-panel hat den
   Footer schon einmal unsichtbar gemacht.

   Einbinden im Child-Theme:
     wp_enqueue_style( 'cewf-footer',
       get_stylesheet_directory_uri() . '/assets/cewf-footer.css' );
   ========================================================= */


/* =========================================================
   1 · Farben, Schrift, Maße
   Bewusst nicht in :root, sondern am Footer. Ein globaler
   Block würde die Werte der ganzen Seite aufzwingen.
   Jede Verwendung trägt zusätzlich einen Literalwert als
   Rückfall, damit ein Ausfall den Footer nicht hell auf hell
   umkippen lässt.
   ========================================================= */
.cewf-host,
.cewf-hintsection,
.cewf-base{
  --cewf-o:#FBB000;            /* Primär Orange              */
  --cewf-o-dark:#D99700;       /* Orange für helle Flächen   */
  --cewf-k:#000000;
  --cewf-w:#FFFFFF;
  --cewf-navy:#112F48;         /* Sekundärfarbe Dunkelblau   */
  --cewf-navy-hell:#1F4E76;    /* Markenkachel               */
  --cewf-navy-tief:#0A2135;    /* Fußleiste                  */
  --cewf-blau-hell:#93B0C4;
  --cewf-text:#BCCEDC;
  --cewf-link:#A7BFD1;
  --cewf-gedaempft:#7E9AB0;
  --cewf-ease:cubic-bezier(.22,.61,.36,1);
  --cewf-max:1400px;
}


/* =========================================================
   2 · Section 1 · die navyfarbene Fläche
   ========================================================= */
.cewf-host{
  background-color:#112F48;
  background-color:var(--cewf-navy,#112F48);
  color:var(--cewf-text,#BCCEDC);
  border-radius:0;             /* keine gerundeten Ecken oben */
  overflow:hidden;             /* begrenzt das Punktraster im ::before */
  position:relative;
  padding:0!important;
  margin:0!important;          /* schließt bündig an den Seiteninhalt an */
}

/* Knotenpunkt-Raster, oben rechts eingeblendet, wandert langsam */
.cewf-host::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(147,176,196,.30) 1px, transparent 1.4px);
  background-size:30px 30px;opacity:.55;
  -webkit-mask-image:radial-gradient(circle at 84% 0%, #000 0%, transparent 60%);
          mask-image:radial-gradient(circle at 84% 0%, #000 0%, transparent 60%);
  animation:cewf-drift 30s linear infinite;
}
@keyframes cewf-drift{from{background-position:0 0;}to{background-position:30px 30px;}}

/* Divi legt Zeilen als Flex-Container an. Beide Zeilen der
   Section brauchen die volle Breite und eine eigene Innenkante. */
.cewf-host .et_pb_row{
  position:relative;z-index:1;
  width:100%!important;max-width:var(--cewf-max,1400px)!important;
  margin:0 auto!important;
}


/* =========================================================
   3 · Zeile 1 · das Fünfspaltenraster
   Divi kennt keine asymmetrische Fünferzeile. Die Zeile wird
   deshalb als 1/5-Raster angelegt und die erste Spalte hier
   verbreitert.
   ========================================================= */
.cewf-cols{
  display:flex!important;flex-wrap:wrap;
  gap:40px 44px;
  padding:52px 48px 0!important;
}
.cewf-cols > .et_pb_column{
  flex:1 1 0;min-width:0;margin:0!important;padding:0!important;
}
.cewf-cols > .cewf-brandcol{ flex:1.35 1 260px; }

@media (max-width:1180px){
  .cewf-cols{gap:38px 32px;}
  .cewf-cols > .et_pb_column{flex:1 1 30%;}
  .cewf-cols > .cewf-brandcol{flex:1 1 100%;}
}
@media (max-width:820px){
  .cewf-cols{padding:38px 26px 0!important;}
  .cewf-cols > .et_pb_column{flex:1 1 45%;}
}
@media (max-width:520px){
  .cewf-cols > .et_pb_column{flex:1 1 100%;}
}


/* =========================================================
   4 · Markenkachel · Gruppenmodul cewf-brand
   ========================================================= */
@property --cewf-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
/* Die Kachel ist die erste Rasterspalte selbst. Der Innenabstand
   braucht dieselbe Spezifität wie die Rasterregel darüber, sonst
   gewinnt dort padding:0.                                        */
.cewf-cols > .cewf-brand{padding:28px 26px!important;align-self:flex-start;}
body #page-container .et_pb_section .cewf-brand.et_pb_column{row-gap:0!important;--vertical-gap:0;}
body #page-container .et_pb_section .cewf-brand.et_pb_column > .et_pb_module{margin:0!important;}
.cewf-brand{
  position:relative;
  /* Aufgehelltes Navy mit 60 Prozent Deckkraft: derselbe
     Farbwinkel wie die Fläche, nur heller. Eine Aufhellung mit
     Weiß würde die Sättigung senken und als Fremdton wirken. */
  background:rgba(31,78,118,.6);
  border:1px solid rgba(147,176,196,.26);
  border-radius:22px;
  display:flex;flex-direction:column;align-items:flex-start;
}
@keyframes cewf-orbit{ to{ --cewf-angle:360deg; } }

/* Lichtlauf im Rand, nur beim Überfahren und nur an Geräten mit
   echtem Zeigegerät. Auf Touch bliebe der Hover-Zustand hängen. */
@media (hover:hover) and (pointer:fine) and (min-width:821px){
  .cewf-brand::after{
    content:"";position:absolute;inset:-1px;border-radius:23px;
    padding:1px;pointer-events:none;
    background:conic-gradient(
      from var(--cewf-angle),
      transparent 0 58%,
      rgba(147,176,196,.5) 72%,
      var(--cewf-o,#FBB000) 82%,
      rgba(147,176,196,.5) 90%,
      transparent 100%);
    -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
            mask-composite:exclude;
    opacity:0;transition:opacity .3s var(--cewf-ease,ease);
  }
  .cewf-brand:hover::after,
  .cewf-brand:focus-within::after{
    opacity:1;animation:cewf-orbit 6.5s linear infinite;
  }
}

/* Logo · Bildmodul.
   Im Modul liegt die offizielle weiße Logodatei. Der frühere
   Filter brightness(0) invert(1) ist deshalb entfernt: er hat
   jedes Pixel erst auf Schwarz und dann auf Weiß gezogen und
   damit die Zweifarbigkeit aus Gelb und Weiß plattgemacht. Das
   Logo erschien als reine weiße Silhouette.
   Die Datei ist 300 mal 89 Pixel groß und wird auf 186px
   angezeigt.                                                  */
.cewf-logo{margin:0 0 4px!important;max-width:186px;}
.cewf-logo img{display:block;width:100%;height:auto;filter:none;}

/* Anschrift · Textmodul */
.cewf-adr{margin:20px 0 0!important;}
.cewf-adr .et_pb_text_inner p{
  margin:0;padding:0;
  font-size:15px;line-height:1.9;color:var(--cewf-text,#BCCEDC);
}
/* Erste Zeile ist der Firmenname, der steht kräftiger und in Weiß. */
.cewf-adr .et_pb_text_inner p:first-child{
  font-weight:800;color:var(--cewf-w,#FFFFFF);margin-bottom:2px;
}


/* =========================================================
   5 · Kontaktzeilen mit Icon · Linkmodule
   Die Icons sind Masken, keine Bilder. Dadurch färben sie sich
   über background aus der Leitfarbe und die Farbe bleibt an
   einer Stelle gepflegt.
   ========================================================= */
body #page-container .et_pb_section .cewf-ico.et_pb_module,
.cewf-ico{
  display:inline-flex!important;
  flex-direction:row!important;--flex-direction:row;
  align-items:center!important;justify-content:flex-start!important;
  row-gap:0!important;column-gap:0!important;
  margin:0!important;padding:0!important;
  font-size:15px;line-height:1.9;color:var(--cewf-text,#BCCEDC)!important;
  transition:color .2s;
}
.cewf-ico .et_pb_link_inner{display:inline-flex;align-items:center;}
.cewf-ico .et_pb_link_text{display:inline;}
.cewf-ico .et_pb_link_text p{margin:0;padding:0;font-size:15px;line-height:1.9;}
.cewf-ico:hover{color:var(--cewf-o,#FBB000)!important;}

.cewf-ico::before{
  content:"";flex:0 0 auto;width:18px;height:18px;margin-right:10px;
  background:var(--cewf-o,#FBB000);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transform-origin:50% 60%;
}
.cewf-ico--tel::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.4 21 3 13.6 3 4.5c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1z'/%3E%3C/svg%3E");
}
.cewf-ico--mail::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}

@keyframes cewf-ring{
  0%,100%{transform:rotate(0deg);}
  12%{transform:rotate(-15deg);}  26%{transform:rotate(13deg);}
  40%{transform:rotate(-10deg);}  54%{transform:rotate(8deg);}
  68%{transform:rotate(-5deg);}   82%{transform:rotate(3deg);}
}
@keyframes cewf-mail{
  0%,100%{transform:translateY(0);}
  35%{transform:translateY(-3px);}
  70%{transform:translateY(1px);}
}
@media (hover:hover) and (pointer:fine) and (min-width:821px){
  .cewf-ico--tel:hover::before {animation:cewf-ring 1.4s ease-in-out infinite;}
  .cewf-ico--mail:hover::before{animation:cewf-mail 1.4s ease-in-out infinite;}
}


/* =========================================================
   6 · Social · Modul „Social Media Folgen"
   Die Modulklasse sitzt auf dem <ul> selbst, nicht auf einem
   Wrapper. Der Flex-Container ist deshalb .cewf-soc.
   Divi erzwingt zusätzlich Größe und Positionierung des Symbols
   mit 0,3,2 und !important, die Gegenregel braucht 0,4,2.
   ========================================================= */
/* Rechtsbündig in der Kachel. Die Kachel ist ein Flex-Container mit
   align-items:flex-start, deshalb reicht justify-content nicht: das
   Modul muss sich zusätzlich über align-self auf die volle Breite
   ziehen, sonst bleibt es so schmal wie die drei Symbole und steht
   weiter links.                                                  */
.cewf-soc{
  display:flex!important;
  flex-direction:row!important;--flex-direction:row;
  flex-wrap:wrap;gap:10px;
  justify-content:flex-end;
  width:100%;align-self:stretch;
  margin:22px 0 0!important;padding:0!important;list-style:none;
  text-align:right;
}
/* Divi schreibt für Social-Module eine eigene Textausrichtung als
   ul.et_pb_social_media_follow_X_tb_footer{text-align:start}, also
   0,1,1. Die Gegenregel braucht 0,2,1.                           */
ul.cewf-soc.et_pb_social_media_follow{justify-content:flex-end;text-align:right;}
.cewf-soc li{margin:0!important;padding:0!important;list-style:none;}
.cewf-soc li.et_pb_social_icon.et_pb_module a.icon{
  width:40px!important;height:40px!important;
  border-radius:50%!important;
  background-color:rgba(147,176,196,.16)!important;
  transition:transform .28s var(--cewf-ease,ease),background-color .22s;
}
.cewf-soc li.et_pb_social_icon.et_pb_module a.icon:hover{
  transform:translateY(-4px);
  background-color:var(--cewf-o,#FBB000)!important;
}
.cewf-soc li.et_pb_social_icon.et_pb_module a.icon:hover::before{
  color:var(--cewf-k,#000)!important;
}
/* Divi blendet den Netzwerknamen als Text ein, im Footer ist nur
   das Symbol gewollt. */
.cewf-soc .et_pb_social_media_follow_network_name{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}


/* =========================================================
   7 · Menüspalten · Gruppe cewf-nav mit Text + Linkmodulen
   Die Gruppe schrumpft auf ihren Inhalt. Dadurch endet die
   Hover-Fläche am letzten Menüpunkt und am längsten Linktext,
   statt sich über die ganze Rasterzelle zu ziehen.
   ========================================================= */
/* Divi schreibt für jede Spalte und jedes Modul eigenes Layout-CSS
   an das Seitenende, unter anderem --vertical-gap und die Flex-
   Richtung. Eine Regel mit 0,1,0 verliert dagegen. Alle Layoutregeln
   im Footer laufen deshalb über body #page-container .et_pb_section,
   also 1,3,1, so wie beim Widerrufsbutton.                        */
body #page-container .et_pb_section .cewf-nav.et_pb_column,
.cewf-nav{
  display:flex!important;
  flex-direction:column!important;--flex-direction:column;
  align-items:flex-start!important;align-self:flex-start;
  row-gap:10px!important;column-gap:0!important;--vertical-gap:10px;
  margin:0!important;
}
body #page-container .et_pb_section .cewf-nav.et_pb_column > .et_pb_module{margin:0!important;}

/* Spaltentitel · Textmodul.
   Der innere Absatz ist inline-block, damit der Orangestrich
   exakt auf Wortbreite läuft und nicht auf Spaltenbreite. */
.cewf-ttl{margin:0!important;}
.cewf-ttl .et_pb_text_inner p{
  display:inline-block;position:relative;
  margin:0;padding:0 0 10px;
  font-size:14.5px;font-weight:900;letter-spacing:.11em;
  text-transform:uppercase;color:var(--cewf-w,#FFFFFF);
}
/* Grundzustand, und damit Mobil und Touch: Strich dauerhaft
   auf voller Titelbreite, ohne Bewegung. */
.cewf-ttl .et_pb_text_inner p::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--cewf-o,#FBB000);
}
@media (hover:hover) and (pointer:fine) and (min-width:821px){
  .cewf-ttl .et_pb_text_inner p::after{
    width:26px;transition:width .35s var(--cewf-ease,ease);
  }
  .cewf-nav:hover      .cewf-ttl .et_pb_text_inner p::after,
  .cewf-nav:focus-within .cewf-ttl .et_pb_text_inner p::after{width:100%;}
}

/* Menüpunkte · je ein eigenes Linkmodul.
   Divi rendert es als <a class="et_pb_link cewf-lnk"> mit dem Text
   in .et_pb_link_text p. Die Regeln decken zusätzlich rohe Links ab,
   etwa aus einem Shortcode, damit ein Wechsel der Herkunft nichts am
   Stylesheet ändert.
   Die Verschiebung beim Überfahren läuft über transform, nicht über
   padding. So ändert sich die Linkbreite nicht und die auf Inhalt
   geschrumpfte Spalte bricht keine Zeile um.                     */
body #page-container .et_pb_section .cewf-lnk.et_pb_module,
.cewf-lnk{
  position:relative;display:inline-block!important;
  margin:0!important;padding:0!important;
  font-size:15px;line-height:1.6;
  color:var(--cewf-link,#A7BFD1)!important;
  transition:transform .28s var(--cewf-ease,ease),color .2s;
}
.cewf-lnk .et_pb_link_inner{display:inline;}
.cewf-lnk .et_pb_link_text{display:inline;}
.cewf-lnk .et_pb_link_text p{margin:0;padding:0;font-size:15px;line-height:1.6;}
.cewf-lnk::before{
  content:"";position:absolute;left:-18px;top:50%;
  width:11px;height:11px;margin-top:-6px;   /* -5.5px Hälfte, -0.5px optische Mitte */
  background:var(--cewf-o,#FBB000);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5 8 6 4 9.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5 8 6 4 9.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:0;transform:translateX(-8px);
  transition:opacity .28s var(--cewf-ease,ease),transform .28s var(--cewf-ease,ease);
}
.cewf-lnk:hover,.cewf-lnk:focus-visible{
  transform:translateX(18px);color:var(--cewf-o,#FBB000)!important;
}
.cewf-lnk:hover::before,.cewf-lnk:focus-visible::before{opacity:1;transform:translateX(0);}

/* Variante ohne Divi-Wrapper, für Links aus einem Shortcode
   oder Code-Modul. Gleiche Optik, nur ohne .et_pb_link_text. */
.cewf-lnk--roh{display:block!important;font-size:15px;line-height:1.6;}
.cewf-lnk--roh + .cewf-lnk--roh{margin-top:10px!important;}

/* Kennzeichnung für Seiten, die noch nicht fertig sind */
.cewf-wip{font-size:13px;font-weight:400;color:var(--cewf-gedaempft,#7E9AB0);white-space:nowrap;}


/* =========================================================
   8 · Sektion Lesbarkeitshinweis
   Eigene Sektion statt einer Hintergrundfarbe auf der Zeile: eine
   Zeile ist auf 1400px begrenzt, die Farbe hätte links und rechts
   die Nachbarfläche stehen lassen. Sie trägt dasselbe Navy wie das
   Menüraster darüber, die Flächen gehen also ineinander über.

   Die Breitenbegrenzung des Textes sorgt für genau zwei Zeilen: der
   Hinweis hat rund 214 Zeichen, bei 12,5px Schrift entspricht das
   etwa 1540px Textlänge. Bei 860px passen rund 119 Zeichen pro
   Zeile, das ergibt zuverlässig zwei und nie drei.
   ========================================================= */
.cewf-hintsection{
  background-color:#112F48;
  background-color:var(--cewf-navy,#112F48);
  margin:0!important;padding:0!important;
}
.cewf-hintsection .et_pb_row{
  position:relative;z-index:1;
  width:100%!important;max-width:var(--cewf-max,1400px)!important;
  margin:0 auto!important;
}
.cewf-hintcol{margin:0!important;padding:0!important;}
.cewf-hint{margin:0!important;}
/* Gleiche Farbe wie die Menüpunkte in den Spalten darüber. */
.cewf-hint .et_pb_text_inner p{
  margin:0;padding:0;
  font-size:12.5px;line-height:1.6;
  color:var(--cewf-link,#A7BFD1);
  max-width:860px;
}
/* Eine im Builder gesetzte Inline-Farbe würde die Regel oben
   schlagen. Deshalb hier ausdrücklich zurücknehmen.            */
.cewf-hint .et_pb_text_inner p span[style]{color:inherit!important;}
.cewf-hintsection a{color:var(--cewf-link,#A7BFD1);text-decoration:underline;}
.cewf-hintsection a:hover{color:var(--cewf-o,#FBB000);}

/* =========================================================
   9 · Section 2 · Fußleiste
   Kein Außenabstand nach oben: der würde den Hintergrund der
   Seite als Streifen zwischen beiden Flächen durchscheinen
   lassen. Die Luft steckt im Innenabstand.
   ========================================================= */
.cewf-base{
  background-color:#0A2135;
  background-color:var(--cewf-navy-tief,#0A2135);
  /* Höhe auf drei Viertel: Der Inhalt gibt 42px vor, das ist die
     Höhe des Widerrufsbuttons aus 13px Schrift mal 1,4 Zeilenhöhe
     plus zweimal 10px Innenabstand und zweimal 2px Rahmen. Mit
     26px Polster ergab das 94px, mit 14px sind es 70px, also
     74 Prozent davon. Kleiner geht nur, wenn der Button flacher
     wird, sonst bleibt die Zeile bei 42px stehen.               */
  margin:0!important;padding:14px 0!important;
}
.cewf-base .et_pb_row{
  width:100%!important;max-width:var(--cewf-max,1400px)!important;
  margin:0 auto!important;padding:0 48px!important;
}


/* Drei Zonen: Copyright links, Widerrufsbutton exakt mittig,
   Rechtslinks rechtsbündig. Das Raster mit 1fr auto 1fr
   zentriert den Button unabhängig von der Breite der beiden
   Außenzonen; mit space-between würde er bei jeder Textänderung
   verrutschen.                                              */
.cewf-baseinner{
  display:grid!important;
  /* max-content statt auto: mit auto drückt das Raster die mittlere
     Spalte zusammen, sobald die Rechtslinks breiter werden, und der
     Button bricht auf zwei Zeilen um.                            */
  grid-template-columns:1fr max-content 1fr;
  align-items:center;gap:14px 30px;
}
.cewf-baseinner > .et_pb_column{margin:0!important;padding:0!important;}
.cewf-baseinner > .cewf-basemitte{
  justify-self:center;align-items:center;min-width:0;
}
/* Der Divi-Wrapper um den Button ist ein Flex-Element in einer
   Spalte mit flex-direction:column und würde sonst auf die volle
   Spaltenbreite gezogen.                                        */
.cewf-basemitte .et_pb_button_module_wrapper{
  width:max-content;max-width:100%;margin:0!important;align-self:center;
}
.cewf-baseinner > .cewf-baserechts{justify-self:end;}

.cewf-copy .et_pb_text_inner p{
  margin:0;padding:0;font-size:13.5px;color:var(--cewf-gedaempft,#7E9AB0);
}

/* Rechtslinks: vier Linkmodule in der rechten Spalte. Die Spalte ist
   der Flex-Container, Richtung ausdrücklich row, sonst stapelt Divi
   sie senkrecht.                                                  */
body #page-container .et_pb_section .cewf-legal.et_pb_column,
.cewf-legal{
  display:flex!important;
  flex-direction:row!important;--flex-direction:row;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;align-items:center!important;
  row-gap:8px!important;column-gap:22px!important;--vertical-gap:8px;
  margin:0!important;padding:0!important;
}
body #page-container .et_pb_section .cewf-legal.et_pb_column > .et_pb_module{margin:0!important;}
body #page-container .et_pb_section .cewf-legallink.et_pb_module,
.cewf-legallink{
  display:inline-block!important;margin:0!important;padding:0!important;
  font-size:13.5px;color:var(--cewf-link,#A7BFD1)!important;transition:color .2s;
}
.cewf-legallink .et_pb_link_text p{margin:0;padding:0;font-size:13.5px;}
.cewf-legallink:hover{color:var(--cewf-o,#FBB000)!important;}

/* Widerrufsbutton · Buttonmodul
   ---------------------------------------------------------------
   Das Symbol ist ein Hintergrundbild des Buttons, kein eigenes
   Element. Grund: Divi behandelt Buttons als Flex-Module und
   steuert Richtung und Ausrichtung über eigene Variablen. Drei
   Versuche über ein ::before als Flex-Element sind daran
   gescheitert, das Symbol stand über oder neben dem Text statt in
   der Mitte, und die Buttonhöhe wanderte mit.

   Mit background-position: 20px center liegt das Symbol per
   Definition auf der senkrechten Mitte des Buttons, unabhängig von
   Flex, Zeilenhöhe und Schriftmetrik. Der Platz dafür kommt aus
   padding-left.

   Die Farbe steckt im SVG, deshalb zwei Fassungen: orange im
   Ruhezustand, schwarz beim Überfahren. Ein currentColor wäre hier
   nicht möglich, dafür ist die Ausrichtung nun eindeutig.

   Fremdregeln, gegen die das laufen muss:
     body #page-container .et_pb_section .preset--module--divi-button--default
       { background-color:#fbb000; color:#070707!important; font-size:20px!important }  1,3,1
     .preset--module--divi-button--default { border-radius:18px!important }             0,1,0
     .btn-hover-schwarz.et_pb_button:hover { background:#000!important }                0,3,0
   Deshalb überall das Präfix body #page-container .et_pb_section.  */
body #page-container .et_pb_section a.cewf-widerruf.et_pb_button,
a.cewf-widerruf.et_pb_button{
  display:inline-block!important;
  margin:0!important;
  border:2px solid var(--cewf-o,#FBB000)!important;
  border-radius:999px!important;
  background-color:transparent!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FBB000' fill-rule='evenodd' d='M13.6 2H6.6A1.6 1.6 0 0 0 5 3.6v16.8A1.6 1.6 0 0 0 6.6 22h10.8a1.6 1.6 0 0 0 1.6-1.6V7.4zM8 9.4h8v1.5H8zm0 3.6h8v1.5H8zm0 3.6h5v1.5H8z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:20px center!important;
  background-size:15px 15px!important;
  color:var(--cewf-o,#FBB000)!important;
  -webkit-text-fill-color:var(--cewf-o,#FBB000);
  font-size:13px!important;font-weight:800!important;letter-spacing:.03em;
  line-height:1.4!important;
  white-space:nowrap!important;
  text-align:center;
  transition:background-color .26s var(--cewf-ease,ease),
             color .26s var(--cewf-ease,ease),
             -webkit-text-fill-color .26s var(--cewf-ease,ease),
             border-color .26s var(--cewf-ease,ease),
             transform .28s var(--cewf-ease,ease);
}
/* Platz links für das Symbol: 20px Rand, 15px Symbol, 9px Abstand */
body #page-container .et_pb_section .cewf-basemitte a.cewf-widerruf.et_pb_button{
  padding:10px 20px 10px 44px!important;
}

/* Divis eigenes Buttonsymbol und das frühere ::before abschalten */
body #page-container .et_pb_section a.cewf-widerruf.et_pb_button::after,body #page-container .et_pb_section a.cewf-widerruf.et_pb_button::before,
a.cewf-widerruf.et_pb_button::after,
a.cewf-widerruf.et_pb_button::before{
  display:none!important;content:none!important;
}

/* Überfahren und Tastaturfokus */
body #page-container .et_pb_section a.cewf-widerruf.et_pb_button:hover,body #page-container .et_pb_section a.cewf-widerruf.et_pb_button:focus-visible,
a.cewf-widerruf.et_pb_button:hover,
a.cewf-widerruf.et_pb_button:focus-visible{
  background-color:var(--cewf-o,#FBB000)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' fill-rule='evenodd' d='M13.6 2H6.6A1.6 1.6 0 0 0 5 3.6v16.8A1.6 1.6 0 0 0 6.6 22h10.8a1.6 1.6 0 0 0 1.6-1.6V7.4zM8 9.4h8v1.5H8zm0 3.6h8v1.5H8zm0 3.6h5v1.5H8z'/%3E%3C/svg%3E")!important;
  color:var(--cewf-k,#000)!important;
  -webkit-text-fill-color:var(--cewf-k,#000)!important;
  border-color:var(--cewf-o,#FBB000)!important;
  transform:translateY(-2px);
  box-shadow:none!important;   /* kein Schlagschatten, kein Glühen */
}
body #page-container .et_pb_section a.cewf-widerruf.et_pb_button:hover *,body #page-container .et_pb_section a.cewf-widerruf.et_pb_button:focus-visible *{
  color:var(--cewf-k,#000)!important;
  -webkit-text-fill-color:var(--cewf-k,#000)!important;
}

@media (max-width:820px){
  .cewf-base .et_pb_row,
  .cewf-hintsection .et_pb_row{padding:0 26px!important;}
  .cewf-baseinner{grid-template-columns:1fr;justify-items:start;}
  .cewf-baseinner > .cewf-basemitte,
  .cewf-baseinner > .cewf-baserechts{justify-self:start;}
  .cewf-basemitte .et_pb_button_module_wrapper{align-self:flex-start;}
  body #page-container .et_pb_section .cewf-basemitte a.cewf-widerruf.et_pb_button{
    padding:10px 18px 10px 42px!important;
  }
  .cewf-legal{justify-content:flex-start;}
}



/* ---------------------------------------------------------------
   Rückfall für die Flächenfarben.
   Divi schreibt im Footer
     .et-l--footer>.et_builder_inner_content .et_pb_section.et_pb_section_X_tb_footer
       { background-color:...!important }
   mit Spezifität 0,4,0. Die Farbe steht deshalb im Modul selbst.
   Diese Regeln greifen nur, falls jemand sie dort auf „keine Farbe"
   zurückstellt, und liegen mit 0,4,1 knapp darüber.
   --------------------------------------------------------------- */
body .et-l--footer .et_builder_inner_content .et_pb_section.cewf-host{
  background-color:#112F48!important;
}
body .et-l--footer .et_builder_inner_content .et_pb_section.cewf-hintsection{
  background-color:#112F48!important;
}
body .et-l--footer .et_builder_inner_content .et_pb_section.cewf-base{
  background-color:#0A2135!important;
}

/* ---------------------------------------------------------------
   Rückfall für die Zeilen-Innenabstände.
   Divi: .et_pb_row_X_tb_footer.et_pb_row{padding:...!important} = 0,2,0
   Hier mit 0,3,1 darüber, damit ein leeres Attributfeld im Builder
   den Footer nicht an die Kante klebt.
   --------------------------------------------------------------- */
.cewf-host .et_pb_row.cewf-cols{padding:52px 48px 52px!important;}
.cewf-hintsection .et_pb_row.cewf-hintrow{padding:18px 48px 18px!important;}
.cewf-base .et_pb_row.cewf-baseinner{padding:0 48px!important;}
@media (max-width:820px){
  .cewf-host .et_pb_row.cewf-cols{padding:38px 26px 38px!important;}
  .cewf-hintsection .et_pb_row.cewf-hintrow{padding:16px 26px 16px!important;}
    .cewf-base .et_pb_row.cewf-baseinner{padding:0 26px!important;}
  .cewf-host::before{animation:none;}
}

/* ---------------------------------------------------------------
   Logo: das Theme-Preset für Bildmodule rundet den Bildrahmen ab
   und beschneidet ihn.
     .preset--module--divi-image--default .et_pb_image_wrap
       { border-radius:35px 35px 0 35px; overflow:hidden }
   Dieselbe Korrektur wie in megamenu.css für .cew-logo.
   --------------------------------------------------------------- */
.cewf-logo .et_pb_image_wrap{border-radius:0!important;overflow:visible!important;}
.cewf-logo,.cewf-logo .et_pb_image_wrap{display:block;line-height:0;}

/* =========================================================
   10 · Divi-Grundregeln zurücknehmen
   Divi setzt global p{padding-bottom:1em} und für
   .et-l--footer ul zusätzlich list-style:disc, padding-left:1em
   und line-height:26px. Ohne diese Regeln stehen Punkte vor den
   Links und die Zeilen laufen zu weit auseinander.
   ========================================================= */
.cewf-host p,.cewf-hintsection p,.cewf-base p{padding-bottom:0;}
.cewf-host ul,.cewf-hintsection ul,.cewf-base ul{list-style:none;margin:0;padding:0;line-height:1.6;}
.cewf-host ul li,.cewf-hintsection ul li,.cewf-base ul li{list-style:none;}
.cewf-host a,.cewf-hintsection a,.cewf-base a{text-decoration:none;box-shadow:none;}
.cewf-host a:focus-visible,.cewf-hintsection a:focus-visible,.cewf-base a:focus-visible{
  outline:2px solid var(--cewf-o,#FBB000);outline-offset:3px;border-radius:3px;
}


/* =========================================================
   11 · Bewegung abschaltbar
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .cewf-host *,.cewf-hintsection *,.cewf-base *{transition:none!important;animation:none!important;}
  .cewf-host::before{animation:none;}
  .cewf-brand::after{display:none;}
  .cewf-ttl .et_pb_text_inner p::after{width:100%;}
}