:root {
  --kachel-grund: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='72'><rect width='96' height='72' fill='%23fff'/><g fill='none' stroke='%234a524e' stroke-width='1.4'><path d='M45.1 16.3 L44.3 17.6 Q43.5 18.9 41.2 18.9 Q38.8 19 36.8 17.9 Q34.8 16.9 34.6 15.5 Q34.4 14 35.3 12.9 Q36.2 11.7 38.3 11.7 Q40.4 11.8 42.1 12.7 Q43.8 13.6 44.5 14.9 Z'/><path d='M79 59.1 L79.2 57.7 Q79.5 56.3 80.5 55 Q81.4 53.7 83.1 53 Q84.7 52.3 86 52.8 Q87.3 53.4 87.4 54.8 Q87.6 56.2 86.4 57.6 Q85.2 59.1 83.5 59.3 Q81.9 59.6 80.4 59.3 Z'/><path d='M70.5 43.3 L71.2 40.8 Q71.9 38.4 74.3 36.6 Q76.7 34.8 79.8 34.4 Q82.8 34 84.5 35.6 Q86.2 37.2 85.6 39.4 Q85 41.6 82.9 43.4 Q80.7 45.2 77.6 45.8 Q74.5 46.4 72.5 44.9 Z'/><path d='M58.1 26.4 L57.3 25.7 Q56.5 24.9 56 23.4 Q55.6 21.9 56.4 20.6 Q57.1 19.3 58.1 18.7 Q59 18.1 59.7 18.9 Q60.5 19.7 60.9 21.1 Q61.2 22.5 60.6 23.9 Q59.9 25.2 59 25.8 Z'/><path d='M28.2 41.1 L28.6 39.1 Q28.9 37.1 30.6 35.6 Q32.4 34.2 34.9 33.9 Q37.5 33.6 39 35.5 Q40.5 37.3 39.9 39.4 Q39.3 41.6 37.4 43.1 Q35.6 44.5 33.3 44.3 Q30.9 44.1 29.6 42.6 Z'/><path d='M55.3 60.3 L56 58.4 Q56.8 56.4 59.7 55.8 Q62.6 55.2 65.1 55.3 Q67.6 55.4 69.5 56.7 Q71.4 58 70.3 59.9 Q69.2 61.8 66.5 62.7 Q63.8 63.6 60.8 63.6 Q57.8 63.6 56.5 62 Z'/><path d='M42.2 68.4 L40.4 68.4 Q38.7 68.4 36.9 66.7 Q35.1 65.1 34 62.5 Q33 59.9 34.1 58.3 Q35.3 56.8 37.2 56.9 Q39.2 57 40.9 58.9 Q42.6 60.7 43.9 63.4 Q45.1 66 43.6 67.2 Z'/><path d='M20.5 14 L18.4 14.6 Q16.4 15.2 14.1 14.5 Q11.8 13.9 9.8 12.2 Q7.9 10.6 8 8.7 Q8.2 6.8 9.6 5.4 Q11 3.9 13.6 5.2 Q16.2 6.4 18.2 8.1 Q20.1 9.8 20.3 11.9 Z'/><path d='M15.4 35.8 L13.6 36.3 Q11.7 36.8 9.8 35.6 Q7.9 34.4 7.2 32.5 Q6.4 30.7 6.7 29.1 Q7 27.5 8.6 27.1 Q10.2 26.6 11.9 27.6 Q13.7 28.5 14.6 30.3 Q15.6 32 15.5 33.9 Z'/><path d='M14.1 70.8 L12.2 68 Q10.4 65.2 9.7 61.4 Q9.1 57.5 11.1 53.9 Q13.2 50.3 16 49 Q18.9 47.8 21.1 50 Q23.3 52.2 23.3 56.3 Q23.3 60.4 21.4 63.5 Q19.5 66.5 16.8 68.7 Z'/><path d='M77.7 12.5 L78.6 10.4 Q79.6 8.2 81.8 7.6 Q83.9 7 86.3 7.1 Q88.6 7.2 89.2 9.3 Q89.8 11.4 89.6 13.6 Q89.5 15.8 87.2 16.7 Q84.9 17.6 82.9 16.7 Q80.9 15.7 79.3 14.1 Z'/><path d='M19 26.3 L18.7 24.7 Q18.3 23.2 19.7 22.1 Q21 21 22.6 20.4 Q24.2 19.8 25.3 21 Q26.3 22.2 26.4 23.6 Q26.5 25 25.6 26.4 Q24.7 27.7 23.1 27.9 Q21.5 28 20.3 27.2 Z'/><path d='M47.2 54.1 L45.5 53.4 Q43.8 52.8 42.7 50.8 Q41.5 48.7 42.4 46.5 Q43.3 44.3 45 43 Q46.6 41.7 48.6 42.5 Q50.7 43.2 51.4 45.7 Q52.1 48.2 51.5 50.6 Q50.9 52.9 49 53.5 Z'/><path d='M81.5 67.3 L82.1 66 Q82.7 64.8 84.3 64 Q85.9 63.2 87.6 63.1 Q89.4 63.1 90.3 63.9 Q91.2 64.8 91.2 66.1 Q91.1 67.4 89.3 68.4 Q87.5 69.4 85.5 69.3 Q83.5 69.3 82.5 68.3 Z'/><path d='M58.2 15.4 L56.2 14.8 Q54.3 14.1 52.9 12.1 Q51.5 10.1 51.8 7.8 Q52.2 5.5 53.4 4 Q54.5 2.4 56.4 2.8 Q58.4 3.2 59.7 5.3 Q60.9 7.4 60.7 9.7 Q60.5 12 59.4 13.7 Z'/><path d='M71.1 32.4 L70.2 33.5 Q69.3 34.5 67.6 34.7 Q66 34.8 64.9 33.6 Q63.8 32.4 63.4 30.9 Q63.1 29.4 64.3 28.5 Q65.6 27.6 67.1 27.8 Q68.6 28 69.9 28.8 Q71.1 29.7 71.1 31 Z'/><path d='M53.4 32.4 L52.5 33.2 Q51.7 34 50.2 34 Q48.7 34 47.5 33.2 Q46.3 32.3 46 31.2 Q45.7 30.1 46.5 29.3 Q47.3 28.5 48.7 28.7 Q50.2 28.9 51.4 29.6 Q52.7 30.2 53 31.3 Z'/><path d='M55.3 44.4 L54.8 43.1 Q54.4 41.7 54.6 40 Q54.8 38.3 56.1 36.9 Q57.3 35.5 58.7 35.2 Q60.1 35 60.5 36.4 Q60.9 37.8 60.4 39.4 Q60 41 59 42.5 Q58 44 56.6 44.2 Z'/><path d='M90.8 28.9 L89.6 29.7 Q88.4 30.4 86.7 29.6 Q84.9 28.7 83.5 27.3 Q82 25.9 82.1 24.3 Q82.2 22.7 83.7 22.1 Q85.1 21.5 87.1 22.2 Q89.1 22.9 90.3 24.6 Q91.5 26.2 91.1 27.6 Z'/><path d='M5.4 49.4 L4.5 48.1 Q3.6 46.9 3.1 45.2 Q2.7 43.4 4.1 42.3 Q5.6 41.1 7.3 40.9 Q9 40.7 9.9 42.2 Q10.8 43.6 10.9 45.2 Q11.1 46.9 9.9 48.3 Q8.8 49.6 7.1 49.5 Z'/><path d='M42.4 27 L41.6 27.8 Q40.7 28.5 39.3 28.3 Q37.9 28.1 36.9 27.3 Q35.8 26.5 35.6 25.4 Q35.5 24.3 36.2 23.4 Q36.9 22.5 38.4 22.6 Q40 22.7 41.2 23.7 Q42.4 24.7 42.4 25.9 Z'/><path d='M69.8 20 L69 19.1 Q68.1 18.3 67.8 16.9 Q67.6 15.6 68 14.3 Q68.5 13 69.4 12.3 Q70.4 11.7 71.3 12.4 Q72.3 13.1 72.7 14.6 Q73.1 16 72.5 17.4 Q71.9 18.7 70.9 19.4 Z'/><circle cx='45.8' cy='9.1' r='1.2' fill='%234a524e' stroke='none'/><circle cx='33.7' cy='48.9' r='0.8' fill='%234a524e' stroke='none'/><circle cx='43.5' cy='21.5' r='0.9' fill='%234a524e' stroke='none'/><circle cx='29.4' cy='30.2' r='0.9' fill='%234a524e' stroke='none'/><circle cx='18.5' cy='39.6' r='1.2' fill='%234a524e' stroke='none'/><circle cx='68.4' cy='44.2' r='1.6' fill='%234a524e' stroke='none'/><circle cx='95.3' cy='59.4' r='1.2' fill='%234a524e' stroke='none'/><circle cx='37.8' cy='51.4' r='1' fill='%234a524e' stroke='none'/><circle cx='27.8' cy='1.2' r='1.4' fill='%234a524e' stroke='none'/><circle cx='93.1' cy='21.6' r='1.6' fill='%234a524e' stroke='none'/><circle cx='16.4' cy='37.1' r='1.6' fill='%234a524e' stroke='none'/><circle cx='69.3' cy='46.9' r='1.6' fill='%234a524e' stroke='none'/><circle cx='68.9' cy='25.5' r='1.5' fill='%234a524e' stroke='none'/><circle cx='68.9' cy='53.3' r='1.1' fill='%234a524e' stroke='none'/><circle cx='15.4' cy='22.2' r='1.6' fill='%234a524e' stroke='none'/><circle cx='41.9' cy='0.7' r='1.1' fill='%234a524e' stroke='none'/><circle cx='3.7' cy='38.8' r='1.3' fill='%234a524e' stroke='none'/><circle cx='15.8' cy='22.5' r='1.1' fill='%234a524e' stroke='none'/><circle cx='23.4' cy='42.7' r='1.1' fill='%234a524e' stroke='none'/><circle cx='93.4' cy='0' r='0.9' fill='%234a524e' stroke='none'/><circle cx='94.2' cy='33.5' r='1.6' fill='%234a524e' stroke='none'/><circle cx='7.7' cy='38.6' r='1.3' fill='%234a524e' stroke='none'/><circle cx='76.8' cy='5.6' r='1.2' fill='%234a524e' stroke='none'/></g></svg>");
  --kachel-trag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect width='72' height='72' fill='%23e0e1e4'/%3E%3Ccircle cx='23.3' cy='10.9' r='2' fill='%234a524e'/%3E%3Ccircle cx='59.1' cy='6.8' r='1.7' fill='%234a524e'/%3E%3Ccircle cx='2.7' cy='31.2' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='39.7' cy='4.3' r='1.7' fill='%234a524e'/%3E%3Ccircle cx='45.4' cy='42' r='0.8' fill='%231d2421'/%3E%3Ccircle cx='3.6' cy='15.9' r='1.6' fill='%234a524e'/%3E%3Ccircle cx='20.9' cy='10.4' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='40.3' cy='49.1' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='26.8' cy='39.4' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='44.6' cy='35.7' r='1.5' fill='%234a524e'/%3E%3Ccircle cx='33.5' cy='66.5' r='1.1' fill='%234a524e'/%3E%3Ccircle cx='57.2' cy='50.3' r='0.9' fill='%234a524e'/%3E%3Ccircle cx='37.8' cy='63' r='2.3' fill='%234a524e'/%3E%3Ccircle cx='43.8' cy='5.3' r='1.5' fill='%234a524e'/%3E%3Ccircle cx='54.5' cy='10.9' r='1.4' fill='%234a524e'/%3E%3Ccircle cx='69.3' cy='5.6' r='1.6' fill='%234a524e'/%3E%3Ccircle cx='24.5' cy='25.2' r='1.4' fill='%231d2421'/%3E%3Ccircle cx='5' cy='6.7' r='1' fill='%234a524e'/%3E%3Ccircle cx='4.4' cy='50.5' r='2' fill='%231d2421'/%3E%3Ccircle cx='20.5' cy='27.8' r='2' fill='%234a524e'/%3E%3Ccircle cx='67.7' cy='25.6' r='1.8' fill='%231d2421'/%3E%3Ccircle cx='4.2' cy='55.3' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='28.6' cy='66' r='1.4' fill='%234a524e'/%3E%3Ccircle cx='32.3' cy='39.6' r='3.1' fill='%231d2421'/%3E%3Ccircle cx='62.2' cy='20' r='1.2' fill='%234a524e'/%3E%3Ccircle cx='49.2' cy='27.4' r='0.9' fill='%234a524e'/%3E%3Ccircle cx='12.7' cy='16.7' r='0.9' fill='%231d2421'/%3E%3Ccircle cx='59.8' cy='13.1' r='1' fill='%234a524e'/%3E%3Ccircle cx='30.2' cy='26.6' r='1.7' fill='%234a524e'/%3E%3Ccircle cx='49.7' cy='37.1' r='1.8' fill='%234a524e'/%3E%3Ccircle cx='32.9' cy='62.7' r='3.5' fill='%231d2421'/%3E%3Ccircle cx='28.7' cy='28.4' r='1.4' fill='%231d2421'/%3E%3Ccircle cx='4.5' cy='4.8' r='0.9' fill='%234a524e'/%3E%3Ccircle cx='7.9' cy='43.3' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='38.6' cy='68.3' r='1.8' fill='%234a524e'/%3E%3Ccircle cx='63' cy='44.2' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='68.8' cy='43.4' r='1.4' fill='%234a524e'/%3E%3Ccircle cx='61.1' cy='-0.5' r='1.4' fill='%231d2421'/%3E%3Ccircle cx='61.1' cy='71.5' r='1.4' fill='%231d2421'/%3E%3Ccircle cx='22.5' cy='10.4' r='2.4' fill='%234a524e'/%3E%3Ccircle cx='34.5' cy='49.8' r='1.5' fill='%234a524e'/%3E%3Ccircle cx='68.5' cy='38' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='54.6' cy='21.5' r='1.9' fill='%234a524e'/%3E%3Ccircle cx='50.1' cy='18.8' r='1.1' fill='%234a524e'/%3E%3Ccircle cx='25.6' cy='16' r='1.6' fill='%234a524e'/%3E%3Ccircle cx='45.8' cy='44.2' r='2.6' fill='%234a524e'/%3E%3Ccircle cx='58' cy='58.9' r='2.3' fill='%234a524e'/%3E%3Ccircle cx='14.4' cy='35.5' r='2.3' fill='%234a524e'/%3E%3Ccircle cx='56.9' cy='34' r='0.9' fill='%234a524e'/%3E%3Ccircle cx='32.2' cy='67.5' r='3.7' fill='%234a524e'/%3E%3Ccircle cx='5.8' cy='7.4' r='1.4' fill='%234a524e'/%3E%3Ccircle cx='14.7' cy='44.9' r='3.2' fill='%234a524e'/%3E%3Ccircle cx='34.5' cy='47' r='2.6' fill='%234a524e'/%3E%3Ccircle cx='60.1' cy='8.6' r='1.2' fill='%234a524e'/%3E%3Ccircle cx='34.4' cy='12.9' r='2.6' fill='%234a524e'/%3E%3Ccircle cx='6.2' cy='68.1' r='2.3' fill='%231d2421'/%3E%3Ccircle cx='28.9' cy='68.2' r='2.3' fill='%234a524e'/%3E%3Ccircle cx='-0.5' cy='2' r='1.7' fill='%231d2421'/%3E%3Ccircle cx='71.5' cy='2' r='1.7' fill='%231d2421'/%3E%3Ccircle cx='58.1' cy='10.5' r='2.8' fill='%231d2421'/%3E%3Ccircle cx='47.3' cy='25.2' r='1.6' fill='%234a524e'/%3E%3Ccircle cx='1.5' cy='57.6' r='2.3' fill='%234a524e'/%3E%3Ccircle cx='73.5' cy='57.6' r='2.3' fill='%234a524e'/%3E%3Ccircle cx='37.9' cy='67.2' r='1.3' fill='%234a524e'/%3E%3Ccircle cx='59.5' cy='15.2' r='0.9' fill='%234a524e'/%3E%3Ccircle cx='36.1' cy='55' r='1.1' fill='%231d2421'/%3E%3Ccircle cx='60.1' cy='4.4' r='2.3' fill='%231d2421'/%3E%3Ccircle cx='47.7' cy='58.7' r='1.5' fill='%234a524e'/%3E%3Ccircle cx='38.3' cy='37.7' r='0.8' fill='%231d2421'/%3E%3Ccircle cx='55.9' cy='43.8' r='2.5' fill='%234a524e'/%3E%3Ccircle cx='12.4' cy='34.1' r='2.3' fill='%234a524e'/%3E%3Ccircle cx='23.5' cy='37.3' r='1.6' fill='%234a524e'/%3E%3Ccircle cx='63.6' cy='4.1' r='0.9' fill='%234a524e'/%3E%3Ccircle cx='55.6' cy='36.6' r='1.6' fill='%234a524e'/%3E%3Ccircle cx='31.9' cy='44.1' r='1.5' fill='%234a524e'/%3E%3Ccircle cx='49.9' cy='32.6' r='1.6' fill='%231d2421'/%3E%3Ccircle cx='36.6' cy='17.8' r='1.5' fill='%234a524e'/%3E%3Ccircle cx='66.4' cy='64.3' r='0.9' fill='%231d2421'/%3E%3Ccircle cx='9.9' cy='8.8' r='1.3' fill='%234a524e'/%3E%3Ccircle cx='48.3' cy='30.8' r='0.9' fill='%234a524e'/%3E%3Ccircle cx='56.4' cy='64.6' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='10.3' cy='63.6' r='3.6' fill='%234a524e'/%3E%3Ccircle cx='53.8' cy='6.8' r='3.1' fill='%234a524e'/%3E%3Ccircle cx='-0.7' cy='59.9' r='0.9' fill='%231d2421'/%3E%3Ccircle cx='71.3' cy='59.9' r='0.9' fill='%231d2421'/%3E%3Ccircle cx='-0.4' cy='29.1' r='1.2' fill='%234a524e'/%3E%3Ccircle cx='71.6' cy='29.1' r='1.2' fill='%234a524e'/%3E%3Ccircle cx='22.9' cy='52' r='0.8' fill='%231d2421'/%3E%3Ccircle cx='31.7' cy='1.3' r='1.1' fill='%234a524e'/%3E%3Ccircle cx='36.9' cy='4.6' r='3.7' fill='%234a524e'/%3E%3Ccircle cx='70' cy='7.5' r='1' fill='%234a524e'/%3E%3Ccircle cx='65.2' cy='13.1' r='2.4' fill='%231d2421'/%3E%3Ccircle cx='61.2' cy='48.7' r='3.5' fill='%231d2421'/%3E%3Ccircle cx='10.8' cy='66.2' r='1.7' fill='%234a524e'/%3E%3Ccircle cx='6.4' cy='4.1' r='2.1' fill='%231d2421'/%3E%3Ccircle cx='64.5' cy='19.4' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='57.7' cy='6' r='2.9' fill='%234a524e'/%3E%3Ccircle cx='19' cy='8.8' r='0.8' fill='%231d2421'/%3E%3Ccircle cx='66.7' cy='19.3' r='0.8' fill='%234a524e'/%3E%3Ccircle cx='67.5' cy='69.8' r='1' fill='%234a524e'/%3E%3C/svg%3E");
  --kachel-bett: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='%23fef0c0'/><circle cx='18.5' cy='14.9' r='0.5' fill='%234a524e'/><circle cx='34.7' cy='0.3' r='0.6' fill='%234a524e'/><circle cx='34.7' cy='40.3' r='0.6' fill='%234a524e'/><circle cx='35.9' cy='3.2' r='0.6' fill='%234a524e'/><circle cx='24.7' cy='1.6' r='0.5' fill='%234a524e'/><circle cx='28.1' cy='18.1' r='0.7' fill='%234a524e'/><circle cx='6.3' cy='9.5' r='0.5' fill='%234a524e'/><circle cx='20.3' cy='37' r='0.6' fill='%234a524e'/><circle cx='31' cy='15.3' r='0.8' fill='%234a524e'/><circle cx='4.1' cy='11.6' r='0.7' fill='%234a524e'/><circle cx='29' cy='16.9' r='0.5' fill='%234a524e'/><circle cx='10.7' cy='8.4' r='0.5' fill='%234a524e'/><circle cx='32.4' cy='8' r='0.9' fill='%234a524e'/><circle cx='35.2' cy='2.2' r='0.5' fill='%234a524e'/><circle cx='19.7' cy='0.9' r='0.5' fill='%234a524e'/><circle cx='36.3' cy='4.5' r='0.6' fill='%234a524e'/><circle cx='4.8' cy='23.1' r='0.9' fill='%234a524e'/><circle cx='8.1' cy='0.3' r='0.5' fill='%234a524e'/><circle cx='8.1' cy='40.3' r='0.5' fill='%234a524e'/><circle cx='21.6' cy='0.7' r='0.5' fill='%234a524e'/><circle cx='19.9' cy='36.8' r='0.5' fill='%234a524e'/><circle cx='15.9' cy='25.5' r='0.5' fill='%234a524e'/><circle cx='23.2' cy='6.9' r='0.6' fill='%234a524e'/><circle cx='38.3' cy='2.2' r='0.6' fill='%234a524e'/><circle cx='24.3' cy='6' r='0.5' fill='%234a524e'/><circle cx='-0.2' cy='-0.1' r='0.5' fill='%234a524e'/><circle cx='-0.2' cy='39.9' r='0.5' fill='%234a524e'/><circle cx='39.8' cy='-0.1' r='0.5' fill='%234a524e'/><circle cx='39.8' cy='39.9' r='0.5' fill='%234a524e'/><circle cx='28.2' cy='38' r='0.5' fill='%234a524e'/><circle cx='24.4' cy='1.7' r='0.5' fill='%234a524e'/><circle cx='27' cy='23.6' r='0.8' fill='%234a524e'/><circle cx='3.5' cy='13.9' r='0.9' fill='%234a524e'/><circle cx='23.4' cy='18.1' r='0.5' fill='%234a524e'/><circle cx='39.4' cy='23' r='0.5' fill='%234a524e'/><circle cx='32' cy='13.1' r='0.5' fill='%234a524e'/><circle cx='8.5' cy='17.8' r='0.5' fill='%234a524e'/><circle cx='3.6' cy='25.2' r='0.5' fill='%234a524e'/><circle cx='31.4' cy='1' r='0.8' fill='%234a524e'/><circle cx='32.3' cy='19.9' r='0.7' fill='%234a524e'/><circle cx='9.9' cy='29.5' r='0.5' fill='%234a524e'/><circle cx='9.2' cy='38.6' r='0.5' fill='%234a524e'/><circle cx='14.9' cy='34.4' r='0.5' fill='%234a524e'/><circle cx='26.7' cy='6.8' r='0.9' fill='%234a524e'/><circle cx='10.4' cy='2' r='1.1' fill='%234a524e'/><circle cx='6.9' cy='37.9' r='1.1' fill='%234a524e'/><circle cx='24.3' cy='0.5' r='0.5' fill='%234a524e'/><circle cx='8.3' cy='15.6' r='0.6' fill='%234a524e'/><circle cx='38.7' cy='14.2' r='0.5' fill='%234a524e'/><circle cx='22.5' cy='5.5' r='0.5' fill='%234a524e'/><circle cx='22.2' cy='27.8' r='0.5' fill='%234a524e'/><circle cx='18.1' cy='28.2' r='0.8' fill='%234a524e'/><circle cx='15.3' cy='35.5' r='0.5' fill='%234a524e'/><circle cx='28.6' cy='30.9' r='0.9' fill='%234a524e'/><circle cx='19.8' cy='4' r='0.5' fill='%234a524e'/><circle cx='21.2' cy='6.9' r='0.7' fill='%234a524e'/><circle cx='3.4' cy='31.2' r='0.5' fill='%234a524e'/><circle cx='0.5' cy='7' r='0.5' fill='%234a524e'/><circle cx='40.5' cy='7' r='0.5' fill='%234a524e'/><circle cx='22.4' cy='15.5' r='0.5' fill='%234a524e'/><circle cx='19.3' cy='37.9' r='0.6' fill='%234a524e'/><circle cx='37.7' cy='1.2' r='1.1' fill='%234a524e'/><circle cx='35.6' cy='21.8' r='0.6' fill='%234a524e'/><circle cx='21.5' cy='36.4' r='0.5' fill='%234a524e'/><circle cx='25.7' cy='21.7' r='0.5' fill='%234a524e'/><circle cx='29' cy='28.8' r='0.5' fill='%234a524e'/><circle cx='28' cy='18.1' r='0.6' fill='%234a524e'/><circle cx='25.5' cy='2.1' r='0.6' fill='%234a524e'/><circle cx='14.9' cy='35.1' r='0.5' fill='%234a524e'/><circle cx='32.9' cy='29.2' r='0.7' fill='%234a524e'/><circle cx='35' cy='1.4' r='0.6' fill='%234a524e'/><circle cx='24.5' cy='27.1' r='0.5' fill='%234a524e'/><circle cx='2.8' cy='7.6' r='0.6' fill='%234a524e'/><circle cx='7.3' cy='2.6' r='0.5' fill='%234a524e'/><circle cx='18.8' cy='21.4' r='0.5' fill='%234a524e'/><circle cx='31' cy='13.4' r='0.8' fill='%234a524e'/><circle cx='0.3' cy='38.2' r='0.6' fill='%234a524e'/><circle cx='40.3' cy='38.2' r='0.6' fill='%234a524e'/><circle cx='39.1' cy='-0.5' r='0.9' fill='%234a524e'/><circle cx='39.1' cy='39.5' r='0.9' fill='%234a524e'/><circle cx='4.2' cy='14' r='0.5' fill='%234a524e'/><circle cx='31.2' cy='7.7' r='0.5' fill='%234a524e'/><circle cx='4.4' cy='4.8' r='1' fill='%234a524e'/><circle cx='39' cy='14.9' r='0.8' fill='%234a524e'/><circle cx='18.7' cy='20.9' r='0.5' fill='%234a524e'/><circle cx='25.4' cy='9.4' r='0.5' fill='%234a524e'/><circle cx='20.7' cy='7.9' r='0.5' fill='%234a524e'/><circle cx='37.8' cy='0.9' r='0.5' fill='%234a524e'/><circle cx='32' cy='2.3' r='0.5' fill='%234a524e'/><circle cx='34.1' cy='24.2' r='0.5' fill='%234a524e'/><circle cx='2.3' cy='11' r='0.5' fill='%234a524e'/><circle cx='32' cy='39' r='0.8' fill='%234a524e'/><circle cx='36.1' cy='37.2' r='0.9' fill='%234a524e'/><circle cx='36.8' cy='38.7' r='0.5' fill='%234a524e'/><circle cx='12.7' cy='9.9' r='0.6' fill='%234a524e'/><circle cx='19.7' cy='13.9' r='0.9' fill='%234a524e'/><circle cx='16' cy='8.4' r='0.5' fill='%234a524e'/><circle cx='18.5' cy='24.4' r='0.6' fill='%234a524e'/></svg>");
  --kachel-fuge: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='24'><rect width='12' height='24' fill='%23fef0c0'/><circle cx='3.1' cy='16.4' r='0.6' fill='%234a524e'/><circle cx='10.2' cy='4.5' r='0.5' fill='%234a524e'/><circle cx='1.8' cy='5.4' r='0.7' fill='%234a524e'/><circle cx='1.6' cy='12.8' r='0.5' fill='%234a524e'/><circle cx='3.5' cy='10.4' r='0.7' fill='%234a524e'/><circle cx='7.3' cy='0.3' r='0.5' fill='%234a524e'/><circle cx='7.3' cy='24.3' r='0.5' fill='%234a524e'/><circle cx='1.8' cy='20.9' r='0.7' fill='%234a524e'/><circle cx='9.7' cy='19.8' r='0.7' fill='%234a524e'/><circle cx='11.4' cy='19.1' r='0.5' fill='%234a524e'/><circle cx='10.2' cy='11.7' r='0.7' fill='%234a524e'/><circle cx='6.8' cy='10.3' r='0.5' fill='%234a524e'/><circle cx='5.2' cy='7.5' r='0.5' fill='%234a524e'/><circle cx='9.8' cy='19.2' r='0.9' fill='%234a524e'/><circle cx='8.3' cy='13.3' r='0.7' fill='%234a524e'/></svg>");
  --bereiche-h: 60px;
  --oben: calc(var(--kopf-h) + var(--bereiche-h));
  --fuge: var(--grau-hell);
}

@media (max-width: 899px) {
  :root { --bereiche-h: 56px; }
}

html {
  scroll-padding-top: calc(var(--oben) + 16px);
}

[id] {
  scroll-margin-top: 0;
}

h4 {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.1;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}

.seitenkopf :focus-visible,
.bereich--gruen :focus-visible,
.bereich--tief :focus-visible,
.ausstellung-blick :focus-visible,
.buehne-schild .schild-leiste :focus-visible {
  outline-color: var(--gelb);
}

.ausstellung-blick .aushang--gelb :focus-visible {
  outline-color: var(--tinte);
}

.seitenkopf {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(360px, 5fr) minmax(0, 7fr);
  min-height: clamp(460px, 40vw, 640px);
  background: var(--gruen-nacht);
}

.seitenkopf-tafel {
  --tafel-oben: clamp(28px, 3.4vw, 56px);
  --tafel-seite: clamp(24px, 4vw, 72px);
  --tafel-links: var(--tafel-seite);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
  padding: var(--tafel-oben) var(--tafel-seite) clamp(36px, 4vw, 64px) var(--tafel-links);
  color: var(--creme);
  container-type: inline-size;
}

@media (min-width: 1500px) {
  .seitenkopf {
    grid-template-columns: calc((100cqw - var(--breite)) / 2 + 520px) minmax(0, 1fr);
  }

  .seitenkopf-tafel {
    --tafel-links: calc((100cqw - var(--breite)) / 2);
  }
}

.seitenkopf-oben {
  position: relative;
}

.seitenkopf-oben::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--tafel-oben));
  left: calc(-1 * var(--tafel-links));
  right: calc(-1 * var(--tafel-seite));
  bottom: -60px;
  background: var(--gruen-tief);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 112px), 0 100%);
}

.brotkrumen ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
}

.brotkrumen li {
  display: flex;
  align-items: center;
}

.brotkrumen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--creme);
  font-weight: 600;
}

.brotkrumen [aria-current="page"] {
  color: var(--creme);
}

.brotkrumen-trenner {
  width: 16px;
  height: 16px;
  margin: 0 10px;
  color: var(--mint);
}

.seitenkopf-titel {
  font-size: clamp(3rem, 23cqi, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--creme);
}

.seitenkopf-titel {
  margin-top: clamp(12px, 2vw, 32px);
}

.seitenkopf-lead {
  max-width: 24ch;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
  line-height: 1.3;
  color: var(--creme);
  hyphens: manual;
  -webkit-hyphens: manual;
}

.seitenkopf-bild {
  position: relative;
  overflow: hidden;
  background: var(--gruen-dunkel);
}

.seitenkopf-bild picture,
.seitenkopf-bild img {
  width: 100%;
  height: 100%;
}

.seitenkopf-bild img {
  object-fit: cover;
}

.bewegt .seitenkopf-titel,
.bewegt .seitenkopf-lead {
  animation: setzen var(--normal) var(--kurve) both;
}

.bewegt .seitenkopf-lead {
  animation-delay: 160ms;
}

@media (max-width: 899px) {
  .seitenkopf {
    display: block;
    min-height: 0;
  }

  .seitenkopf-tafel {
    --tafel-oben: 8px;
    --tafel-seite: var(--rand);
    --tafel-links: var(--rand);
    gap: 24px;
    padding: 8px var(--rand) 32px;
  }

  .seitenkopf-oben::before {
    bottom: -20px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 23.5cqi), 0 100%);
  }

  .seitenkopf-titel {
    font-size: clamp(2.75rem, 12cqi, 4.25rem);
  }

  .seitenkopf-lead {
    margin-top: 16px;
  }

  .seitenkopf-bild {
    aspect-ratio: 16 / 10;
  }
}

.bereiche {
  position: sticky;
  top: var(--kopf-h);
  z-index: 40;
  display: flex;
  align-items: stretch;
  height: var(--bereiche-h);
  overflow: hidden;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-hell);
}

.bereiche-fenster {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: var(--rand);
}

.bereiche-fenster::-webkit-scrollbar {
  display: none;
}

.bereiche.kann-links .bereiche-fenster {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px);
  mask-image: linear-gradient(to right, transparent, #000 56px);
}

.bereiche.kann-rechts .bereiche-fenster {
  -webkit-mask-image: linear-gradient(to left, transparent, #000 56px);
  mask-image: linear-gradient(to left, transparent, #000 56px);
}

.bereiche.kann-links.kann-rechts .bereiche-fenster {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}

.bereiche-liste {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2vw, 34px);
  width: max-content;
  height: 100%;
  margin: 0;
  padding: 0 var(--rand) 0 max(var(--rand), calc((100% - var(--breite)) / 2));
  list-style: none;
}

.bereiche-liste li {
  display: flex;
}

.bereiche-liste li[hidden] {
  display: none;
}

.bereiche a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--tinte);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--kurz) var(--kurve);
}

.bereiche a:hover {
  color: var(--gruen-tief);
}

.bereiche a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--gruen-tief);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--normal) var(--kurve);
}

.bereiche a[aria-current="true"] {
  color: var(--gruen-tief);
}

.bereiche a[aria-current="true"]::after {
  transform: none;
}

.bereiche a:focus-visible {
  outline-offset: -3px;
}

.bereiche-weiter {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--gruen-tief);
  transition: transform var(--kurz) var(--kurve);
}

.bereiche a:hover .bereiche-weiter {
  transform: translateX(3px);
}

.wegraute {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: -0.12em;
  overflow: visible;
}

.wegraute-stein {
  fill: var(--rahmen);
  transition: fill var(--normal) var(--kurve);
}

.wegraute-rahmen {
  fill: none;
  stroke: var(--rahmen);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--normal) var(--kurve);
}

.ist-vorbei .wegraute-stein {
  fill: var(--mint);
}

.bereiche a:hover .wegraute-stein,
.ist-hier .wegraute-stein {
  fill: var(--gelb);
}

.ist-hier .wegraute-rahmen {
  opacity: 1;
}

.bereiche-pfeil {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--weiss);
  color: var(--gruen-tief);
  cursor: pointer;
}

.bereiche-pfeil svg {
  width: 20px;
  height: 20px;
}

.bereiche-pfeil--zurueck svg {
  transform: rotate(180deg);
}

.bereiche-pfeil:hover {
  background: var(--creme-hell);
}

@media (hover: hover) and (pointer: fine) {
  .bereiche.kann-links .bereiche-pfeil--zurueck,
  .bereiche.kann-rechts .bereiche-pfeil--weiter {
    display: grid;
  }
}

html:not(.js) .bereiche-pfeil {
  display: none;
}

@media (max-width: 1179px) {
  html:not(.js) .bereiche {
    top: 0;
  }
}

.register {
  padding-block: clamp(64px, 7vw, 112px);
  background: var(--creme-hell);
}

.register-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  margin-bottom: clamp(28px, 3vw, 44px);
}

.register-fragen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  max-width: 34rem;
  margin: 0;
  color: var(--tinte-2);
}

.register-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  white-space: nowrap;
}

.register-tel svg {
  width: 20px;
  height: 20px;
}

.az-filter {
  margin-bottom: 18px;
}

.az-filter[hidden] {
  display: none;
}

.az-filter-titel {
  margin: 0 0 10px;
  font-weight: 600;
}

.az-buchstaben {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.az-buchstabe {
  --r: 0deg;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 2px;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  cursor: pointer;
  transform: rotate(var(--r));
  box-shadow: inset 0 -3px 0 rgb(29 36 33 / 0.08), 0 1px 0 rgb(29 36 33 / 0.06);
  transition: transform 360ms var(--kurve), background-color var(--kurz) var(--kurve), box-shadow 360ms var(--kurve);
}

.az-buchstaben li:nth-child(4n+1) .az-buchstabe { --r: -2deg; }
.az-buchstaben li:nth-child(4n+2) .az-buchstabe { --r: 1.5deg; }
.az-buchstaben li:nth-child(4n+3) .az-buchstabe { --r: -1deg; }
.az-buchstaben li:nth-child(4n) .az-buchstabe { --r: 2deg; }

.az-buchstabe:hover {
  background: var(--creme);
  transform: rotate(0deg) translateY(-3px);
}

.az-buchstabe[aria-pressed="true"] {
  background: var(--gelb);
  transform: rotate(0deg) translateY(-5px);
  box-shadow: 0 8px 14px rgb(29 36 33 / 0.18);
}

.az-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  min-height: 44px;
  margin-top: 16px;
}

.az-zahl {
  margin: 0;
  color: var(--tinte-2);
  font-weight: 600;
}

.az-aus {
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--gruen-tief);
  border-radius: 0;
  background: transparent;
  color: var(--gruen-tief);
  font: 600 1rem/1.2 var(--schrift-text);
  cursor: pointer;
}

.az-aus:hover {
  background: var(--gruen-tief);
  color: var(--weiss);
}

.az-aus[hidden] {
  display: none;
}

.az-steine {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.az-eintrag {
  scroll-margin-top: 160px;
  transition: opacity 360ms var(--kurve), transform 420ms var(--kurve);
}

.az-eintrag.faellt {
  opacity: 0;
  transform: translateY(28px) rotate(var(--dreh, 4deg));
}

.az-eintrag[hidden] {
  display: none;
}

.az-stein {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 18px 8px 14px;
  border-radius: 2px;
  background: var(--weiss);
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-size: 1.1875rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgb(29 36 33 / 0.08), 0 1px 0 rgb(29 36 33 / 0.06);
  transition: background-color var(--kurz) var(--kurve), transform var(--kurz) var(--kurve);
}

.az-stein::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--gruen);
  transform: rotate(45deg);
}

a.az-stein {
  color: var(--gruen-tief);
}

a.az-stein span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a.az-stein:hover {
  background: var(--gelb);
  color: var(--tinte);
  transform: translateY(-2px);
}

.az-eintrag:target .az-stein {
  background: var(--gelb);
  color: var(--tinte);
  box-shadow: 0 0 0 3px var(--gruen-tief);
}

.az-eintrag:target .az-stein::before {
  background: var(--gruen-tief);
}

@media (prefers-reduced-motion: reduce) {
  .az-buchstabe,
  .az-eintrag,
  .az-stein {
    transition: none;
  }
}

@media (max-width: 599px) {
  .az-stein {
    font-size: 1.0625rem;
    min-height: 48px;
  }
}

.bereich {
  position: relative;
  padding-bottom: clamp(72px, 9vw, 144px);
}

.bereich--creme {
  background: var(--creme-hell);
}

.bereich--kurz {
  padding-top: clamp(72px, 9vw, 144px);
}

.buehne {
  position: relative;
}

.buehne-bild {
  height: clamp(340px, 46vw, 720px);
  overflow: hidden;
  background: var(--grau-hell);
}

.buehne-bild picture,
.buehne-bild img {
  width: 100%;
  height: 100%;
}

.buehne-bild img {
  object-fit: cover;
}

.buehne-schild {
  position: absolute;
  bottom: 0;
  left: max(var(--rand), calc((100% - var(--breite)) / 2));
  width: min(620px, calc(100% - 2 * var(--rand)));
  padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 40px) 0;
  background: var(--creme-hell);
  color: var(--tinte);
}

.buehne--rechts .buehne-schild {
  left: auto;
  right: max(var(--rand), calc((100% - var(--breite)) / 2));
}

.schild-gross {
  color: var(--gruen-tief);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  line-height: 1;
}

.schild-satz {
  margin: 14px 0 0;
  padding-bottom: clamp(24px, 2.6vw, 32px);
  color: var(--tinte-2);
  font-size: var(--t-lead);
  line-height: 1.45;
}

.buehne-schild::after {
  content: "";
  display: block;
  height: 10px;
  margin: 0 calc(-1 * clamp(24px, 2.6vw, 40px));
  background: var(--gruen-nacht);
}

.schild-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0 calc(-1 * clamp(24px, 2.6vw, 40px));
  padding: 6px clamp(24px, 2.6vw, 40px) 4px;
  background: var(--gruen-nacht);
  list-style: none;
}

.buehne-schild:has(.schild-leiste)::after {
  content: none;
}

.schild-leiste a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  color: var(--creme);
  font-weight: 600;
  text-decoration: none;
}

.schild-leiste a:hover {
  color: var(--weiss);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.schild-raute {
  flex: none;
  width: 11px;
  height: 11px;
  margin-top: -0.12em;
  fill: var(--rahmen);
  transition: fill var(--kurz) var(--kurve);
}

.schild-leiste a:hover .schild-raute,
.schild-leiste a:focus-visible .schild-raute {
  fill: var(--gelb);
}

@media (max-width: 899px) {
  .buehne-bild {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .buehne-schild,
  .buehne--rechts .buehne-schild {
    position: static;
    width: auto;
    margin: 0;
    padding-inline: var(--rand);
    background: var(--weiss);
  }

  .bereich--creme .buehne-schild {
    background: var(--creme-hell);
  }

  .buehne-schild::after,
  .schild-leiste {
    margin-inline: calc(-1 * var(--rand));
    padding-inline: var(--rand);
  }
}

.raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px clamp(24px, 4vw, 72px);
  margin-top: clamp(56px, 7vw, 112px);
}

.raster-seite {
  min-width: 0;
}

.fliesstext {
  max-width: 66ch;
}

.fliesstext > :last-child {
  margin-bottom: 0;
}

.hervor {
  max-width: 34ch;
  margin: 1.4em 0 1.3em;
  color: var(--gruen-tief);
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
  line-height: 1.25;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.hervor--absatz {
  max-width: 44ch;
  font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  line-height: 1.4;
}

.rautenliste {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
}

.rautenliste li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.rautenliste li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.8em - 0.08em);
  width: 7px;
  height: 7px;
  background: var(--gruen);
  transform: translateY(-50%) rotate(45deg);
}

.text-bild {
  margin: clamp(28px, 3vw, 44px) 0;
}

.text-bild img {
  width: 100%;
}

.seiten-bild {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--grau-hell);
}

.seiten-bild--quer {
  aspect-ratio: 4 / 3;
  margin-top: 36px;
}

.seiten-bild picture,
.seiten-bild img {
  width: 100%;
  height: 100%;
}

.seiten-bild img {
  object-fit: cover;
}

.verband {
  display: block;
  position: sticky;
  top: calc(var(--oben) + 40px);
  width: 100%;
  max-width: 300px;
  height: auto;
  overflow: visible;
}

.vb-stein {
  fill: var(--grau-hell);
  fill-opacity: 0.5;
  stroke: var(--rahmen);
  stroke-width: 1.3px;
  stroke-opacity: 0.8;
  transition: fill-opacity var(--normal) var(--kurve), stroke-opacity var(--normal) var(--kurve);
  transition-delay: calc(var(--i, 0) / var(--n, 40) * var(--lang));
}

.vb-stein--gelb { fill: var(--gelb); fill-opacity: 0.55; }
.vb-stein--mint { fill: var(--mint); fill-opacity: 0.6; }
.vb-stein--creme { fill: var(--creme); fill-opacity: 1; }
.vb-stein--gruen { fill: var(--gruen); fill-opacity: 0.3; }

.vb-lager {
  fill: none;
  stroke: var(--gruen);
  stroke-width: 1.6px;
  stroke-dasharray: 3 3;
  opacity: 0.7;
  transition: opacity var(--normal) var(--kurve);
  transition-delay: calc(var(--i, 0) / var(--n, 40) * var(--lang));
}

.bewegt .verband:not(.ist-gesetzt) .vb-stein {
  fill-opacity: 0;
  stroke-opacity: 0.45;
}

.bewegt .verband:not(.ist-gesetzt) .vb-lager {
  opacity: 0;
}

.bereich--creme .vb-stein {
  fill: var(--creme);
  fill-opacity: 0.55;
}

.bereich--creme .vb-stein--creme { fill: var(--gelb); fill-opacity: 0.3; }
.bereich--creme .vb-stein--mint { fill: var(--mint); fill-opacity: 0.6; }

@media (max-width: 899px) {
  .raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .verband {
    position: static;
    max-width: min(100%, 340px);
  }

  .seiten-bild {
    aspect-ratio: 4 / 3;
  }
}

.unterbereich {
  margin-top: clamp(96px, 11vw, 176px);
}

.unterbereich--eng {
  margin-top: clamp(72px, 8vw, 128px);
}

.unter-kopf {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px clamp(24px, 4vw, 72px);
  align-items: end;
}

.unter-kopf--gespiegelt {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.unter-kopf--gespiegelt .unter-bild {
  order: 2;
}

.unter-bild {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--grau-hell);
}

.unter-bild picture,
.unter-bild img {
  width: 100%;
  height: 100%;
}

.unter-bild img {
  object-fit: cover;
}

.unter-titel {
  color: var(--gruen-tief);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  line-height: 1.02;
}

.unter-titel--klein {
  font-size: clamp(2rem, 1.45rem + 1.9vw, 3.25rem);
}

.unter-satz {
  max-width: 30ch;
  margin: 18px 0 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.375rem, 1.12rem + 0.85vw, 1.875rem);
  line-height: 1.3;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.kapitel-titel {
  color: var(--gruen-tief);
  font-size: var(--t-h3);
}

.kapitel-titel--klein {
  margin: 0 0 14px;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
}

p.kapitel-titel {
  font-family: var(--schrift-titel);
  line-height: 1.1;
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}

.kapitel-satz {
  margin: 10px 0 0;
  color: var(--tinte-2);
  font-size: var(--t-lead);
}

@media (max-width: 899px) {
  .unter-kopf,
  .unter-kopf--gespiegelt {
    grid-template-columns: minmax(0, 1fr);
  }

  .unter-kopf--gespiegelt .unter-bild {
    order: 0;
  }
}

.betonarten {
  margin-top: clamp(64px, 7vw, 112px);
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--creme-hell);
}

.betonarten-kopf {
  margin-bottom: clamp(28px, 3vw, 44px);
}

.verbandliste {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 6px;
  background: var(--fuge);
}

.verbandliste-stein {
  padding: clamp(22px, 2.4vw, 36px);
  background: var(--creme-hell);
  transition: background-color var(--kurz) var(--kurve);
}

.verbandliste-stein:hover {
  background: var(--creme);
}

.verbandliste-stein:nth-child(1),
.verbandliste-stein:nth-child(4) {
  grid-column: span 7;
}

.verbandliste-stein:nth-child(2),
.verbandliste-stein:nth-child(3) {
  grid-column: span 5;
}

.verbandliste dt {
  margin: 0 0 10px;
  color: var(--gruen-tief);
  font-family: var(--schrift-titel);
  font-size: var(--t-h3);
  line-height: 1.1;
}

.verbandliste dd {
  max-width: 62ch;
  margin: 0;
}

.verbandliste dd p:last-child {
  margin-bottom: 0;
}

@media (max-width: 899px) {
  .verbandliste-stein:nth-child(n) {
    grid-column: 1 / -1;
  }
}

.aufklapp {
  margin: 28px 0 32px;
  border-top: 2px solid var(--fuge);
}

.mehr {
  border-bottom: 2px solid var(--fuge);
}

.mehr-zeile {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 12px 8px 12px 4px;
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--kurz) var(--kurve), color var(--kurz) var(--kurve);
}

.mehr-zeile::-webkit-details-marker {
  display: none;
}

.mehr-zeile:hover {
  background: var(--creme-hell);
  color: var(--gruen-tief);
}

.bereich--creme .mehr-zeile:hover {
  background: var(--creme);
}

.mehr-zeile:focus-visible {
  outline-offset: 2px;
}

.mehr-raute {
  flex: none;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.mehr-stein {
  fill: transparent;
  stroke: var(--gruen-tief);
  stroke-width: 2.2px;
  transition: fill var(--kurz) var(--kurve), stroke var(--kurz) var(--kurve);
}

.mehr-rahmen {
  fill: none;
  stroke: var(--rahmen);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--kurz) var(--kurve);
}

.mehr[open] .mehr-stein {
  fill: var(--gelb);
  stroke: transparent;
}

.mehr[open] .mehr-rahmen {
  opacity: 1;
}

.mehr-titel {
  flex: 1;
}

.mehr-pfeil {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gruen-tief);
  transition: transform var(--kurz) var(--kurve);
}

.mehr[open] .mehr-pfeil {
  transform: rotate(180deg);
}

.mehr-inhalt {
  padding: 4px 0 24px 40px;
}

.mehr-inhalt > :last-child {
  margin-bottom: 0;
}

.bewegt .mehr[open] .mehr-inhalt {
  animation: setzen var(--normal) var(--kurve) both;
}

.mehr.ist-zu .mehr-stein {
  fill: transparent;
  stroke: var(--gruen-tief);
}

.mehr.ist-zu .mehr-rahmen {
  opacity: 0;
}

.mehr.ist-zu .mehr-pfeil {
  transform: none;
}

@media (max-width: 599px) {
  .mehr-inhalt {
    padding-left: 0;
  }
}

.aushang--hell {
  --stein: var(--gelb);
  background: var(--creme);
  color: var(--tinte);
}

.vorteile {
  margin-top: 40px;
  background: var(--creme-hell);
}

.vorteile-titel {
  margin: 0 0 16px;
  color: var(--gruen-tief);
  font-size: var(--t-h3);
}

.vorteile .rautenliste {
  margin: 0;
}

.lager-hinweis {
  margin-top: 8px;
}

.lager-hinweis p {
  max-width: 52ch;
  margin: 0;
  font-size: var(--t-lead);
  line-height: 1.45;
}

.bereich--gruen {
  padding-top: clamp(72px, 9vw, 144px);
  background: var(--gruen-nacht);
  color: var(--creme);
}

.bereich--gruen .titel-gross {
  color: var(--creme);
}

.bereich--gruen .fliesstext a {
  color: var(--creme);
}

.gruen-kopf {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px clamp(24px, 4vw, 72px);
  align-items: end;
}

.gruen-satz {
  max-width: 38ch;
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.375rem, 1.12rem + 0.85vw, 1.875rem);
  line-height: 1.3;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.splitt-fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(40px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.splitt-fotos li {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--gruen-dunkel);
}

.splitt-fotos picture,
.splitt-fotos img {
  width: 100%;
  height: 100%;
}

.splitt-fotos img {
  object-fit: cover;
}

.bereich--gruen .hervor {
  color: var(--gelb);
}

.flyer {
  position: sticky;
  top: calc(var(--oben) + 40px);
  max-width: 360px;
  background: var(--creme-hell);
}

.flyer-link {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  color: var(--tinte);
  text-decoration: none;
}

.flyer-icon {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 5px;
  background: var(--gruen-tief);
  color: var(--weiss);
  transition: background-color var(--kurz) var(--kurve);
}

.flyer-text {
  display: grid;
  gap: 4px;
}

.flyer-name {
  font-family: var(--schrift-titel);
  font-size: 1.5rem;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.flyer-art {
  color: var(--tinte-2);
  font-size: 1rem;
}

.flyer-link:hover .flyer-name {
  color: var(--gruen-tief);
  text-decoration-thickness: 2px;
}

.flyer-link:hover .flyer-icon {
  background: var(--gruen-nacht);
}

.flyer-link:focus-visible {
  outline-color: var(--gruen-tief);
  outline-offset: 6px;
}

@media (max-width: 899px) {
  .gruen-kopf {
    grid-template-columns: minmax(0, 1fr);
  }

  .splitt-fotos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .flyer {
    position: static;
  }

  .raster--gruen .raster-seite {
    order: 2;
  }
}

.mauer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.mauer li {
  flex: 1 1 auto;
  padding: 14px 18px 15px;
  background: var(--grau-hell);
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.2;
  text-align: center;
  hyphens: manual;
  -webkit-hyphens: manual;
  transition: opacity var(--normal) var(--kurve), transform var(--normal) var(--kurve);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.mauer li.mauer-sand {
  background: var(--creme);
}

.mauer li.mauer-dunkel {
  background: var(--tinte-2);
  color: var(--weiss);
}

.bewegt .mauer:not(.ist-gesetzt) li {
  opacity: 0;
  transform: translateY(-18px);
}

.seiten-bild--hoch {
  position: sticky;
  top: calc(var(--oben) + 40px);
}

.gabionen-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 40px clamp(24px, 4vw, 72px);
  align-items: center;
}

.gabionen-bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--grau-hell);
}

.gabionen-bild picture,
.gabionen-bild img {
  width: 100%;
  height: 100%;
}

.gabionen-bild img {
  object-fit: cover;
}

.gabione {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: clamp(32px, 4vw, 56px);
}

.gb-stein {
  fill: var(--grau-hell);
  stroke: var(--rahmen);
  stroke-width: 1.2px;
  transition: transform var(--normal) var(--kurve), opacity var(--normal) var(--kurve);
  transition-delay: calc(var(--i, 0) / var(--n, 80) * var(--lang));
}

.gb-stein--creme { fill: var(--creme); }
.gb-stein--mint { fill: var(--mint); }
.gb-stein--gelb { fill: var(--gelb); }

.gb-gitter {
  fill: none;
  stroke: var(--tinte-2);
  stroke-width: 1.1px;
  opacity: 0.7;
}

.gb-rahmen {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 3px;
}

.bewegt .gabione:not(.ist-gesetzt) .gb-stein {
  opacity: 0;
  transform: translateY(-40px);
}

@media (max-width: 899px) {
  .gabionen-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.bereich--tief {
  background: var(--gruen-tief);
  color: var(--creme);
}

.bereich--tief .titel-gross {
  color: var(--creme);
}

.gebraucht-raster {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 40px clamp(24px, 4vw, 72px);
  align-items: center;
}

.gebraucht-arten {
  margin: 14px 0 0;
  font-size: var(--t-lead);
  font-weight: 600;
}

.gebraucht-satz {
  max-width: 26ch;
  margin: clamp(28px, 3vw, 44px) 0 clamp(32px, 3.5vw, 48px);
  font-family: var(--schrift-titel);
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 3rem);
  line-height: 1.2;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.gebraucht-muster .verband {
  position: static;
  margin-left: auto;
}

.verband--kopfstein .vb-stein {
  fill: var(--weiss);
  fill-opacity: 0.06;
  stroke: var(--mint);
  stroke-opacity: 0.55;
}

.verband--kopfstein .vb-stein--gelb { fill: var(--gelb); fill-opacity: 0.7; }
.verband--kopfstein .vb-stein--creme { fill: var(--creme); fill-opacity: 0.35; }

.bewegt .verband--kopfstein:not(.ist-gesetzt) .vb-stein {
  fill-opacity: 0;
  stroke-opacity: 0.2;
}

@media (max-width: 899px) {
  .gebraucht-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .gebraucht-muster {
    order: -1;
  }

  .gebraucht-muster .verband {
    margin-left: 0;
  }
}

.wissen-hinweis {
  padding-top: clamp(72px, 9vw, 144px);
}

.wissen-hinweis-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(32px, 5vw, 96px);
  align-items: start;
}

.wissen-hinweis-kopf .titel-riesig {
  color: var(--gruen-tief);
}

.qs-klein {
  display: grid;
  grid-template-rows: 30px 18px 44px 36px;
  width: min(100%, 240px);
  margin-top: clamp(28px, 3vw, 44px);
  border: 2px solid var(--tinte);
  border-top: 0;
}

.qs-klein span {
  display: block;
}

.qs-klein-pflaster {
  background: linear-gradient(to right, transparent 0 24%, var(--tinte) 24% calc(24% + 2px), transparent calc(24% + 2px) calc(24% + 8px), var(--tinte) calc(24% + 8px) calc(24% + 10px), transparent calc(24% + 10px) calc(76% - 10px), var(--tinte) calc(76% - 10px) calc(76% - 8px), transparent calc(76% - 8px) calc(76% - 2px), var(--tinte) calc(76% - 2px) 76%, transparent 76%), linear-gradient(var(--tinte), var(--tinte)) 0 0 / 100% 2px no-repeat;
  margin-top: -2px;
}

.qs-klein-bett {
  background: var(--kachel-bett) 0 0 / 40px 40px;
}

.qs-klein-trag {
  background: var(--kachel-trag) 0 0 / 72px 72px;
}

.qs-klein-grund {
  background: var(--kachel-grund) 0 0 / 96px 72px;
}

.wissen-wege {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--fuge);
}

.wissen-wege li {
  padding: 20px 0 22px;
  border-bottom: 2px solid var(--fuge);
}

.wissen-weg-titel {
  margin: 0 0 6px;
  font-size: var(--t-h3);
}

.wissen-weg-titel a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  color: var(--tinte);
  text-decoration: none;
}

.wissen-weg-titel .pfeil {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--gruen-tief);
  transform: translateY(2px);
  transition: transform var(--kurz) var(--kurve);
}

.wissen-weg-titel a:hover {
  color: var(--gruen-tief);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

.wissen-weg-titel a:hover .pfeil {
  transform: translate(4px, 2px);
}

.wissen-wege p {
  max-width: 62ch;
  margin: 0;
  color: var(--tinte-2);
}

@media (max-width: 899px) {
  .wissen-hinweis-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wissen-seite > .kapitel:first-child {
  margin-top: clamp(72px, 8vw, 128px);
}

.seitenkopf-lead--lang {
  max-width: 34ch;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.4;
}

.kapitel {
  margin-top: clamp(88px, 10vw, 160px);
}

.raster--kapitel {
  margin-top: 0;
}

.raster--kapitel .raster-seite .unter-satz {
  max-width: 24ch;
}

.lager {
  margin-top: clamp(48px, 5vw, 72px);
}

.musterreihe {
  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1260px) {
  .musterreihe {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .musterreihe {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 369px) {
  .musterreihe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.musterreihe li {
  display: grid;
  gap: 10px;
  align-content: start;
  font-size: 1rem;
  line-height: 1.3;
}

.musterkasten {
  width: 100%;
  max-width: 112px;
  height: auto;
  aspect-ratio: 1;
  border: 4px solid var(--tinte-2);
  background: var(--creme);
}

.musterkasten--hell {
  background: var(--creme-hell);
}

.musterkasten--grau {
  background: var(--grau-hell);
}

.mk-korn {
  fill: var(--tinte-2);
}

.musterkasten--hell .mk-korn {
  fill: var(--rahmen);
}

.verlegung-kopf {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.verlegung-kopf .unter-satz {
  max-width: 40ch;
}

.verlegung-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px clamp(32px, 5vw, 96px);
  align-items: start;
}

.querschnitt {
  position: sticky;
  top: calc(var(--oben) + 32px);
  margin: 0;
}

.qs-aufbau {
  display: grid;
}

.qs-schicht {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  min-height: var(--h);
}

.qs-schicht--pflaster { --h: 104px; }
.qs-schicht--bett { --h: 64px; }
.qs-schicht--trag { --h: 152px; }
.qs-schicht--grund { --h: 124px; }

.qs-name {
  position: relative;
  align-self: center;
  margin: 0;
  padding: 8px 26px 8px 0;
  color: var(--tinte-2);
  font-family: var(--schrift-titel);
  font-size: clamp(1.0625rem, 0.98rem + 0.3vw, 1.25rem);
  line-height: 1.25;
  transition: color var(--normal) var(--kurve);
  hyphens: manual;
  -webkit-hyphens: manual;
}

.qs-zusatz {
  display: block;
  margin-top: 2px;
  font-family: var(--schrift-text);
  font-size: 0.9375rem;
}

.qs-name::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 16px;
  height: 1px;
  background: var(--tinte-2);
}

.qs-schicht.ist-aktiv .qs-name {
  color: var(--gruen-tief);
}

.qs-schicht.ist-aktiv .qs-name::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--gelb);
  transform: translateY(-50%) rotate(45deg);
}

.qs-flaeche {
  position: relative;
  border-inline: 2px solid var(--tinte);
  transition: clip-path var(--lang) var(--kurve);
  clip-path: inset(0);
}

.qs-schicht--grund .qs-flaeche {
  border-bottom: 2px solid var(--tinte);
  background: var(--kachel-grund) 0 0 / 96px 72px;
}

.qs-schicht--trag .qs-flaeche {
  background: var(--kachel-trag) 0 0 / 72px 72px;
}

.qs-schicht--bett .qs-flaeche {
  background: var(--kachel-bett) 0 0 / 40px 40px;
}

.qs-schicht--pflaster .qs-flaeche {
  border-color: transparent;
  overflow: hidden;
}

.qs-stein {
  --s: 56%;
  --j: 12px;
  position: absolute;
  top: 14px;
  bottom: 0;
  width: var(--s);
  border: 3px solid var(--tinte);
  background: var(--weiss);
  transition: transform var(--normal) var(--kurve), opacity var(--normal) var(--kurve);
  transition-delay: calc(var(--i) * 160ms);
}

.qs-stein--mitte { left: 22%; }
.qs-stein--links { left: calc(22% - var(--j) - var(--s)); }
.qs-stein--rechts { left: calc(78% + var(--j)); }

.qs-fuge {
  position: absolute;
  top: 22px;
  bottom: 0;
  width: 12px;
  background: var(--kachel-fuge) 0 0 / 12px 24px;
  transition: clip-path var(--normal) var(--kurve);
  transition-delay: calc(var(--i) * 80ms);
  clip-path: inset(0);
}

.qs-fuge--links { left: calc(22% - 12px); }
.qs-fuge--rechts { left: 78%; }

.querschnitt figcaption {
  margin-top: 18px;
  color: var(--tinte-2);
  font-size: 1rem;
  line-height: 1.45;
}

.qs-lauf .qs-schicht:not(.ist-da) .qs-flaeche {
  clip-path: inset(100% 0 0 0);
}

.qs-lauf .qs-schicht:not(.ist-da)::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  border: 2px dashed var(--rahmen);
  border-top-width: 0;
}

.qs-lauf .qs-schicht--pflaster:not(.ist-da)::after {
  border-top-width: 2px;
}

.qs-lauf .qs-schicht .qs-flaeche {
  grid-column: 2;
  grid-row: 1;
}

.qs-lauf:not(.hat-pflaster) .qs-stein {
  opacity: 0;
  transform: translateY(-22px);
}

.qs-lauf:not(.hat-fugen) .qs-fuge {
  clip-path: inset(0 0 100% 0);
}

.qs-lauf .qs-stein {
  transform: translateY(-4px);
}

.qs-lauf.ist-geruettelt .qs-stein {
  transform: none;
  transition-delay: 0ms;
}

.qs-lauf .qs-schicht--pflaster .qs-flaeche,
.qs-lauf .qs-schicht--pflaster:not(.ist-da) .qs-flaeche {
  clip-path: none;
}

.schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

.schritt {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0 16px;
  padding: 22px 0 24px;
  border-top: 2px solid var(--fuge);
  counter-increment: schritt;
}

.schritt::before {
  content: counter(schritt);
  color: var(--gruen-tief);
  font-family: var(--schrift-titel);
  font-size: 2.5rem;
  line-height: 1;
}

.schritt p {
  max-width: 60ch;
  margin: 0;
}

.schritt strong {
  font-weight: 700;
}

.schritt::after {
  content: "";
  position: absolute;
  left: -26px;
  top: 37px;
  width: 10px;
  height: 10px;
  background: transparent;
  transform: rotate(45deg);
  transition: background-color var(--normal) var(--kurve);
}

.qs-lesen .schritt.ist-vorbei::after {
  background: var(--mint);
}

.qs-lesen .schritt.ist-hier::after {
  background: var(--gelb);
}

.ruettel-hinweis {
  max-width: 760px;
  margin-top: clamp(40px, 5vw, 64px);
  margin-left: auto;
}

.ruettel-hinweis p {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.625rem);
  line-height: 1.3;
}

@media (min-width: 960px) and (max-height: 820px) {
  .qs-schicht--pflaster { --h: 88px; }
  .qs-schicht--bett { --h: 56px; }
  .qs-schicht--trag { --h: 116px; }
  .qs-schicht--grund { --h: 96px; }

  .querschnitt {
    top: calc(var(--oben) + 20px);
  }
}

@media (max-width: 959px) {
  .verlegung-raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .querschnitt {
    position: static;
    max-width: 560px;
  }

  .ruettel-hinweis {
    margin-left: 0;
  }
}

@media (max-width: 599px) {
  .qs-schicht {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .qs-schicht--trag { --h: 128px; }
  .qs-schicht--grund { --h: 104px; }

  .qs-name {
    font-size: 1rem;
  }

  .schritt {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .schritt::before {
    font-size: 2rem;
  }

  .schritt::after {
    left: -18px;
  }
}

.wissen-band {
  margin-top: clamp(88px, 10vw, 160px);
  padding-block: clamp(72px, 9vw, 144px);
  background: var(--creme-hell);
}

.wissen-band .kapitel:first-child {
  margin-top: 0;
}

.ausbluehungen-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px clamp(24px, 4vw, 72px);
  align-items: start;
}

.ausbluehungen-bild {
  position: sticky;
  top: calc(var(--oben) + 40px);
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--grau-hell);
}

.ausbluehungen-bild picture,
.ausbluehungen-bild img {
  width: 100%;
  height: 100%;
}

.ausbluehungen-bild img {
  object-fit: cover;
}

.ausbluehungen-satz {
  margin: 14px 0 clamp(28px, 3vw, 40px);
  color: var(--gruen-tief);
  font-family: var(--schrift-titel);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1.15;
  hyphens: manual;
  -webkit-hyphens: manual;
}

.kapitel--vdw {
  margin-top: clamp(64px, 7vw, 112px);
}

.vdw {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 28px clamp(24px, 3vw, 48px);
  align-items: center;
  max-width: 900px;
  margin-left: auto;
  padding: clamp(24px, 3vw, 40px);
  border: 2px solid var(--fuge);
}

.vdw-bild {
  display: grid;
  place-items: center;
}

.vdw-bild img {
  width: 140px;
}

.vdw-titel {
  margin: 0 0 10px;
  font-size: var(--t-h3);
}

.vdw p {
  max-width: 52ch;
  margin-bottom: 8px;
}

@media (max-width: 899px) {
  .ausbluehungen-raster,
  .wissen-kopf {
    grid-template-columns: minmax(0, 1fr);
  }

  .ausbluehungen-bild {
    position: static;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 599px) {
  .vdw {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
  }

  .vdw-bild img {
    width: 80px;
  }
}

.ausstellung-blick {
  position: relative;
  overflow: hidden;
  background: var(--gruen-dunkel);
}

.blick-bild {
  position: absolute;
  inset: -12% 0;
  will-change: transform;
}

.blick-bild picture,
.blick-bild img {
  width: 100%;
  height: 100%;
}

.blick-bild img {
  object-fit: cover;
}

.blick-huelle {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(520px, 48vw, 760px);
  padding-block: clamp(72px, 8vw, 120px) clamp(48px, 5vw, 80px);
}

.blick-schild {
  max-width: 620px;
}

.blick-titel {
  margin: 0 0 16px;
  color: var(--tinte);
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  line-height: 1.15;
}

.blick-schild p {
  max-width: 44ch;
  margin: 0 0 24px;
  font-size: var(--t-lead);
  line-height: 1.45;
}

@media (max-width: 899px) {
  .blick-bild {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    transform: none !important;
  }

  .blick-huelle {
    min-height: 0;
    padding-block: 0 48px;
    margin-top: -40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bereiche a::after {
    transition: none;
  }
}

.seitenkopf-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
}

.seitenkopf-tafel {
  z-index: 2;
}

.seitenkopf-tafel::after {
  --fliese: clamp(52px, 4.6vw, 72px);
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;

  bottom: calc(var(--fliese) * 0.2071 + var(--fliese-abstand, 30px));
  width: var(--fliese);
  aspect-ratio: 1;
  background: var(--gelb);

  box-shadow: inset 0 0 0 5px rgb(255 255 255 / 0.28), 0 10px 22px rgb(10 74 61 / 0.35), 18px -18px 0 -8px var(--mint);
  transform: translateX(50%) rotate(45deg);
  pointer-events: none;
}

@media (min-width: 900px) {
  .seitenkopf:has(.seitenkopf-bild) .seitenkopf-tafel {
    padding-bottom: var(--fliese-abstand, 30px);
  }

  .seitenkopf:has(.seitenkopf-bild) .seitenkopf-lead {
    margin-bottom: -0.34em;
  }

  .seitenkopf:has(.seitenkopf-bild) .tafel-daten {
    margin-bottom: -0.55em;
  }
}

@media (max-width: 899px) {
  .seitenkopf-tafel::after {
    --fliese: 48px;
    right: auto;
    left: calc(var(--rand) + 24px);
    bottom: 0;
    transform: translateY(50%) rotate(45deg);
  }
}

@media (max-width: 899px) {
  .seitenkopf:has(.seitenkopf-bild) .seitenkopf-tafel {
    padding-bottom: 59px;
  }
}

:is(.az-buchstabe, .az-aus, a.az-stein):is(:active, .ist-gedrueckt):not([aria-disabled="true"]) {
  filter: brightness(0.92);
  scale: 0.97;
  translate: 0 1px;
  transition-duration: 0.05s;
}

.az-aus:is(:active, .ist-gedrueckt):not([aria-disabled="true"]) {
  background: var(--gruen-tief);
  color: var(--weiss);
}

@media (max-height: 300px) {
  .bereiche {
    position: static;
  }
}

@media (forced-colors: active) {
  .az-buchstabe {
    border: 1px solid ButtonText;
  }

  .az-buchstabe[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
}

@media (max-height: 480px) {
  html {
    scroll-padding-top: calc(var(--kopf-h) + 16px);
  }

  .bereiche {
    position: relative;
  }

  html:has(.feld :focus) {
    scroll-padding-top: 16px;
  }

  html:has(.feld :focus) .kopf {
    position: relative;
  }
}