/*==========================================================================
REZEPT
===========================================================================*/
/*-----------------------------------
  Rezept Hauptcontainer
-----------------------------------
  - zentriert den Inhalt
-----------------------------------*/
.ar-recipe {
    margin: 0 auto;    /* zentriert auf der Seite */
}


/*==========================================================================
  TITEL
===========================================================================*/
/*==========================================================================
  REZEPT TITEL
  Nur Layout – keine Schriftgrößen / keine Farben
===========================================================================*/

.ar-recipe-title{
    max-width:920px;
    font-size:36px;
    font-weight:500;
    line-height:1.25;
    margin:0 0 25px 0;
    text-align:left;
}
/*==========================================================================
  REZEPTBILD
===========================================================================*/
/*-----------------------------------
  Rezeptbild
-----------------------------------
  - zentriert
  - responsive
  - skaliert
-----------------------------------*/
.ar-recipe-image {
    margin-bottom: 40px;
}

/* Bild selbst */
.ar-recipe-image img {
    display: block;
    max-width: 1080px;  /* Bildbreite aktuell 1600px  */
    width: 100%;
    height: auto;
    margin: 0 auto; /* auto -> zentriert */
}

/*==========================================================================
  REZEPT INTRO
  - Einleitungstext des Rezepts
===========================================================================*/
.ar-recipe-intro {
    margin-bottom: 25px; /* Abstand zum nächsten Bereich */
    line-height: 1.6;    /* bessere Lesbarkeit */
}

/*==========================================================================  
 SLIDER PORTIONEN
===========================================================================*/

/*-----------------------------------
 Gesamter Steuerungsbereich

 Enthält:
 - Reset Button
 - Portionenbereich links
 - Switch rechts

 Alles in EINER Linie
-----------------------------------*/
.ar-controls{
    display:flex;
    align-items:center;
    gap:24px;
    width:100%;
    flex-wrap:nowrap;

    padding:18px 22px;
    border:1px solid #ececec;
    border-radius:15px;

    margin-bottom:24px;
}


/*-----------------------------------
 Gesamter Bereich für Portionen

 Enthält:
 - Text "Portionen:"
 - Zahlenfeld
 - Slider

 Alles nebeneinander in einer Linie
-----------------------------------*/
.ar-servings-control{
    display:flex;          /* horizontale Anordnung */
    align-items:center;   /* vertikal mittig */
    gap:16px;             /* Abstand zwischen Elementen */
    flex:1;               /* nimmt verfügbare Breite */
    min-width:0;          /* erlaubt Slider-Schrumpfung */
}


/*-----------------------------------
 Text links: Portionen:
-----------------------------------*/
.ar-servings-label{
    white-space:nowrap;   /* kein Zeilenumbruch */
    margin:0;
}

/*-----------------------------------
 Text rechts vom Switch
-----------------------------------*/
.ar-unit-label{
    font-family:inherit;
    font-size:14px;
    font-weight:400;
    color:var(--contrast2);
    line-height:1;
    letter-spacing:0;
}
/*-----------------------------------
 Reset Button kompakter
-----------------------------------*/
#ar-reset-servings{
    height:30px;
    padding:0 12px;
    border:1px solid #d9d9d9;
    border-radius:6px;
    background:transparent;
    white-space:nowrap;
    transition:0.18s ease;
    font-size:14px;
    font-weight:400;
    color:var(--contrast2);
    line-height:1;
    font-family:inherit;
  letter-spacing:0;
}


/* Hover */
#ar-reset-servings:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(0,0,0,0.02);
}


/*-----------------------------------
 Zahlenfeld Portionen

 - bestehende Funktion bleibt erhalten
 - nur Optik wird verbessert
-----------------------------------*/
#ar-servings-input{
    width:80px;              /* kompakte Breite */
    height:30px;
    border:1px solid #ddd;   /* dezenter Rand */
    border-radius:7px;       /* weich / modern */
    font-size:14px;
    padding:0 14px;
    flex-shrink:0;           /* bleibt fix */
}


/*-----------------------------------
 Slider Portionen

 - linke aktive Seite = Akzentfarbe
 - rechte Seite bleibt grau
-----------------------------------*/
#ar-servings-slider{
    flex:1;                       /* nimmt Restbreite ein */
    min-width:0;                 /* Mindestbreite */
    width:auto;
    accent-color:var(--accent);  /* aktive Farbe links */
    margin:0;
}


/*===============================================================================
 SWITCH METRISCH / US
=================================================================================*/

/*-----------------------------------
 Switch rechts in gleicher Zeile
-----------------------------------*/
.ar-unit-toggle{
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-end;
    white-space:nowrap;
    flex-shrink:0;
    margin:0;
}


/*-----------------------------------
 Switch selbst
-----------------------------------*/
.ar-unit-toggle input[type="checkbox"]{
    appearance:none;
    -webkit-appearance:none;
    width:42px;
    height:24px;
    background:#dddddd;
    border-radius:999px;
    position:relative;
    cursor:pointer;
    transition:0.22s ease;
    border:none;
    outline:none;
}


/*-----------------------------------
 Kreis im Switch
-----------------------------------*/
.ar-unit-toggle input[type="checkbox"]::before{
    content:"";
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    background:#ffffff;
    border-radius:50%;
    box-shadow:0 1px 4px rgba(0,0,0,0.18);
    transition:0.22s ease;
}

/*-----------------------------------
 Aktivzustand
-----------------------------------*/
.ar-unit-toggle input[type="checkbox"]:checked{
    background:var(--accent);
}

.ar-unit-toggle input[type="checkbox"]:checked::before{
    transform:translateX(18px);
}

/*==========================================================================
  GUTES BLATT – DESKTOP EDITORIAL LAYOUT FINAL
  Zutaten links (25%)
  Schritte rechts fließen vorbei
  Danach volle Breite
===========================================================================*/


/*==========================================================================
  HAUPTBEREICH REZEPTINHALT
===========================================================================*/

/*-----------------------------------
  Clearfix für Float Layout

  Sorgt dafür, dass der Elterncontainer
  die Höhe korrekt behält.
-----------------------------------*/
.ar-recipe-content::after{
    content:"";
    display:block;
    clear:both;
}



/*==========================================================================
  BEREICHSÜBERSCHRIFTEN
===========================================================================*/

/*-----------------------------------
  Hauptüberschriften

  Beispiele:
  - Zutaten
  - Zubereitung
-----------------------------------*/
.ar-section-title{
    font-size:22px;
    line-height:1.15;

    font-family:Marcellus, serif;
    font-weight:400;

    color:var(--contrast);

    margin:38px 0 16px;
}



/*==========================================================================
  ZUTATENSPALTE LINKS
===========================================================================*/

/*-----------------------------------
  Zutatenbereich links

  Verhalten:

  - steht links
  - nimmt 25% Breite ein
  - erhält klare Trennkante
  - Schritte laufen rechts vorbei
-----------------------------------*/
.ar-recipe-ingredients{
    float:left;

    width:25%;
    max-width:360px;
    min-width:280px;

    padding-right:34px;
    margin:0 56px 36px 0;

    border-right:1px solid #ececec;

    font-family:inherit;
}



/*-----------------------------------
  Gruppenüberschriften innerhalb
  der Zutatenliste

  Beispiele:
  - Teig
  - Füllung
  - Topping
-----------------------------------*/
.ar-recipe-ingredients h4{
    font-size:14px;
    line-height:1.25;

    font-weight:700;
    font-style:italic;

    margin:34px 0 5px;

    color:var(--contrast);
}

/* erste Überschrift oben bündig */
.ar-recipe-ingredients h4:first-child{
    margin-top:0;
}



/*-----------------------------------
  Einzelne Zutatenzeile

  links  = Zutatenname
  rechts = Menge
-----------------------------------*/
.ar-recipe-ingredients .ingredient{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;

    align-items:start;

    padding:6px 0;

    border-bottom:1px solid #f1f1f1;
}



/*-----------------------------------
  Zutatenname + Zusatztext

  Hängender Einzug:

  Hafer geflockt – am besten in
      Premiumqualität und glutenfrei
-----------------------------------*/
.ar-recipe-ingredients .ingredient .name{
    min-width:0;

    font-size:14px;
    line-height:1.4;

    color:var(--contrast);

    padding-left:16px;
    text-indent:-16px;

    overflow-wrap:break-word;
}



/*-----------------------------------
  Optionaler Zusatztext (.note)
-----------------------------------*/
.ar-recipe-ingredients .ingredient .note{
    font-size:12px;
    line-height:1.3;

    color:var(--contrast2);
    font-style:italic;
}



/*-----------------------------------
  Metrische Angaben

  WICHTIG:
  jetzt wieder rechtsbündig
-----------------------------------*/
.ar-recipe-ingredients .ingredient .metric{
    min-width:58px;

    text-align:right;
    white-space:nowrap;

    font-size:13px;
    line-height:1.3;

    color:#4a4a4a;

    display:block;
}



/*-----------------------------------
  US Angaben

  gleiches Verhalten wie metrisch
-----------------------------------*/
.ar-recipe-ingredients .ingredient .us{
    min-width:58px;

    text-align:right;
    white-space:nowrap;

    font-size:13px;
    line-height:1.3;

    color:#4a4a4a;

    display:none;
}



/*-----------------------------------
  Wenn US Modus aktiv ist
-----------------------------------*/
.ar-unit-us .ar-recipe-ingredients .ingredient .metric{
    display:none;
}

.ar-unit-us .ar-recipe-ingredients .ingredient .us{
    display:block;
}



/*==========================================================================
  ZUBEREITUNG RECHTS
===========================================================================*/

/*-----------------------------------
  Schrittebereich

  Dadurch fließt der Text sauber
  rechts neben den Zutaten vorbei
  und darunter automatisch vollbreit.
-----------------------------------*/
.ar-recipe-steps{
    overflow:hidden;
}



/*-----------------------------------
  Einzelner Schritt
-----------------------------------*/
.ar-step{
    display:flex;
    gap:12px;

    margin-bottom:22px;
}



/*-----------------------------------
  Schrittzahl im Kreis
-----------------------------------*/
.ar-step-number{
    width:22px;
    height:22px;

    border-radius:50%;

    background:var(--accent);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:12px;
    font-weight:600;

    color:var(--base);

    flex-shrink:0;
}



/*-----------------------------------
  Schritttext
-----------------------------------*/
.ar-step-content{
    flex:1;
}



/*==========================================================================
  RESPONSIVE
===========================================================================*/

/*-----------------------------------
  Unter 1100px:

  - Float aufheben
  - Zutaten volle Breite
  - Schritte darunter
-----------------------------------*/
@media (max-width:1100px){

.ar-recipe-ingredients{
    float:none;

    width:100%;
    max-width:100%;
    min-width:0;

    padding-right:0;
    margin:0 0 34px 0;

    border-right:none;
}

.ar-recipe-steps{
    overflow:visible;
}

}



/*-----------------------------------
  Mobile Feinjustierung
-----------------------------------*/
@media (max-width:768px){

.ar-section-title{
    font-size:20px;
    margin:30px 0 14px;
}

.ar-recipe-ingredients .ingredient .name{
    font-size:15px;
}

}